Knockout Custom Binding To An Object

Question

I'm currently designing a in-browser calculator, and the functionality I want is to create an input box, and bind it to a object in the view-model.

This object will have a property called value, which will be what the input box displays, but I also want it to have min and max limits which which change the background colour of the box to red if they are exceeded.

I got the basic input binding to work, but I'm having trouble creating my own custom binding wrapper for the input binding that also changes the background colour.

My HTML:

<td><input data-bind="calcVar: resistance" type="text" size="16" /></td>

My Javascript:

The "class" to hold all the data

var calcVar = function(value, lowerBound, upperBound) {
        this.value = ko.observable(value);
        this.lowerBound = ko.observable(lowerBound);
        this.upperBound = ko.observable(upperBound);
};

Creating a variable in the view-model:

this.fSwAct = ko.observable(new calcVar(200, 100, 100, 0, 1000));

Start-up function

// Start-up function
j(document).ready(
    function StartUp()
    {           
        // Create custom binding
        ko.bindingHandlers.calcVar = {
             init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
                  ko.bindingHandlers.value.init(element, valueAccessor()().value, allBindings, viewModel, bindingContext);
             },
             update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
                  // Call value binding (child binding)
                  ko.bindingHandlers.value.update(element, valueAccessor()().value, allBindings, viewModel, bindingContext);
             }
        };
        // Activates knockout.js
        var app = new AppViewModel();
        ko.applyBindings(app);  
    }
);

Although the custom binding function is being called, the input bindings don't seem to work, and other calculated fields don't update when the value is changed. I feel it's something to do with the way I am creating the calcVar "class" or passing it it in to the input binding.

pax162 pax162 · Accepted Answer · 2013-11-04T03:08:29

You don't actually need a custom binding to do make the background red, you can just use the style builtin binding. But making a custom binding does result in a cleaner markup. Here are two example implementations, one with custom bindings, one without (fiddle:http://jsfiddle.net/EWdmV/5/):

html:

<span>--------- no custom binding ---------</span><br />
<td><input data-bind="value:value, valueUpdate:'afterkeydown', style:{ 'background-color' : isOutsideBounds() ? 'red':'white'}" type="text" size="16" /></td>


<span>--------- with custom binding ---------</span><br />
<td><input data-bind="value:value, valueUpdate:'afterkeydown', calcVar: isOutsideBounds" type="text" size="16" /></td>

js:

var CalcVar = function(value, lowerBound, upperBound) {
        var self = this;
        self.value = ko.observable(value);
        self.lowerBound = ko.observable(lowerBound);
        self.upperBound = ko.observable(upperBound);
        self.isOutsideBounds = ko.computed(function(){
            var val = parseFloat(self.value(),10);
            console.log(val);
            console.log(val > self.upperBound() || val < self.lowerBound());
        return val > self.upperBound() || val < self.lowerBound();
    }, self);

};

ko.bindingHandlers.calcVar = {
    init:function(element, valueAccessor){        
    },
    update:function(element, valueAccessor){        
        if(valueAccessor()()){
            $(element).css("backgroundColor", "red");
        } else {
            $(element).css("backgroundColor", "white");
        }
    }
}

ko.applyBindings(new CalcVar(100, 10,1000));

EDIT: If you really want shorter markup, here are another two alternatives, using a template, and using a custom binding which calls renderTemplate (probably this is what you need) (updated fiddle:http://jsfiddle.net/EWdmV/14/):

html:

<span>--------- with custom binding tempalate ---------</span><br />
<div data-bind="template:{name:'superCalcTemplate', data:resistor1}" ></div>
<br />
<span>--------- with super custom binding ---------</span><br />
<div data-bind="superCalcVar:resistor1"></div>
<div data-bind="superCalcVar:resistor2"></div>

<script type="text/html" id="superCalcTemplate">
    <input data-bind="value:value, valueUpdate:'afterkeydown', calcVar: isOutsideBounds" type="text" size="16" />    
</script>

js:

ko.bindingHandlers.calcVar = {
    init:function(element, valueAccessor, allBindings, viewModel, bindingContext){        
    },
    update:function(element, valueAccessor, allBindings, viewModel, bindingContext){        
        if(valueAccessor()()){
            $(element).css("backgroundColor", "red");
        } else {
            $(element).css("backgroundColor", "white");
        }
    }
}

ko.bindingHandlers.superCalcVar = {
    init:function(element, valueAccessor, allBindings, viewModel, bindingContext){   

        ko.renderTemplate("superCalcTemplate", valueAccessor(), {}, element, "replaceChildren");
         return { controlsDescendantBindings: true };              

    },
    update:function(element, valueAccessor, allBindings, viewModel, bindingContext){                               
    }
}

Knockout Custom Binding To An Object

1 Answers