Knockout Binding - "local"

by ScottRippey

HTML

<h1 data-bind="text: title">(JS broken)</h1>

<!-- ko local: { 
    helloWorld: hello() + world().toUpperCase()
    , fooBar: foo() + bar() 
} --><!-- /ko -->

<div>
    
    <h2 data-bind="text: helloWorld"></h2>
    <h3 data-bind="text: fooBar"></h3>
    
    <input data-bind="value: hello, valueUpdate: 'afterkeydown'" />
    <input data-bind="value: world, valueUpdate: 'afterkeydown'" />
    <input data-bind="value: foo, valueUpdate: 'afterkeydown'" />
    <input data-bind="value: bar, valueUpdate: 'afterkeydown'" />    
    
</div>

JavaScript

ko.virtualElements.allowedBindings.local = true;
ko.bindingHandlers.local = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        
        var locals = valueAccessor();
        for (var local in locals) {
            if (!locals.hasOwnProperty(local)) continue;
            
            // Create the observable:
            bindingContext[local] = ko.observable(locals[local]);
        }
    }
    ,
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        
        var locals = valueAccessor();
        for (var local in locals) {
            if (!locals.hasOwnProperty(local)) continue;
            
            // Update the observable:
            bindingContext[local](locals[local]);
        }
        
        
    }
};










// Test data:

var vm = {
    title: "KO Local Variables"
    , hello: ko.observable("Hello ")
    , world: ko.observable("World")
    , foo: ko.observable("Foo ")
    , bar: ko.observable("Bar")
    //, helloWorld: "hw"
    //, fooBar: "fb"
};


ko.applyBindings(vm);