knockout.jsko-custom-binding

Knockoutjs Custom Binding style child


I have a custom binding.

<div data-bind="autocomplete : { inputStyle : { marginRight : marginR }}"></div>

in my init function I do this. I add a inputbox that I need to be styled.

$element.append("<input type='text' data-bind='style='" + value.inputStyle + "' />");

I know this wont work, but please can somebody help me do it right.


Solution

  • Here is the custom binding doing what you requested:

    function toStyleStr (obj) {
        var result = "";
        $.each(obj, function (k,v) {
            result += k.toString() + ": " + ko.utils.unwrapObservable(v).toString() + ";"; 
        });    
        return result;               
    }
    
    ko.bindingHandlers.autocomplete = {
        init: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                $element = $(element);
            $element.append("<input type='text' style='" + toStyleStr(value.inputStyle) + "' />");     
        }            
    };
    
    var model = {
        marginR: ko.observable("10px")
    };
    ko.applyBindings(model);
    

    Here is a working fiddle: http://jsfiddle.net/RYnbR/2/