smart text in multiple bindings

by ozzymcduff

HTML

<div data-bind="foreach:vals">
    <div style="width:100px;height:20px;" data-bind="smart_list:['scroll_height', 'scroll_height_2', 'scroll_height_3'], smart_text:$data"></div>
</div>

CSS

.scroll_height {
    color:red;
    font-size:15px;
}
.scroll_height_2 {
    color:red;
    font-size:10px;
}
.scroll_height_3 {
    color:red;
    font-size:5px;
}

JavaScript

function tryOutClass(element, classname) {
    element.style.overflow = 'scroll';
    var names = [];
    if (element.scrollHeight > element.offsetHeight) {
        names.push(classname);
    }
    var result = false;
    if (names.length > 0) {
        element.className = names.join(',');
        if (!(element.scrollHeight > element.offsetHeight)) {
            result = true;
        }
    }

    element.style.overflow = 'hidden';
    return result;
}

ko.bindingHandlers.smart_text = {
    'init': ko.bindingHandlers['text']['init'],
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {

        ko.bindingHandlers['text'].update(element, valueAccessor)

        var value = ko.unwrap(valueAccessor() || "");
        var list = allBindingsAccessor().smart_list;
        var i;

        for (i = 0; i < list.length; ++i) {
            if (tryOutClass(element, list[i])) {
                break;
            }
        }
    }
};
var viewModel = {
    vals: [1, 2, 'dfgja asdlkjf adsljföl asdflkj asaslkdfjasd', 'asfdasdfasdf', 'gfdsg']
}
ko.applyBindings(viewModel);