Multiple Knockout binding with function and variable

Question

Multiple Knockout binding.

I want to use just one apply binding instead of two apply binding. One is variable other is function. i am using requireJS also.

HTML:

<button id= "Hand" name="Hand"
                    data-bind="click: Handler2">
            </button>

KnockoutJS

function (ko, $)
        {                                            
            function DM1ViewModel() {
                var self = this;
                self.bId = ko.observable('TEST456');

            }
            $('#hide').hide();


        var DMD2 = {
        Handler2: function() {

           window.location='http:www.google.com';
        }
    };

           ko.applyBindings(new DM1ViewModel(), document.getElementById('Container'));
           ko.applyBindings(DMD2);
            });

It's not clear from your sample what the aim is - container isn't visible. You can apply bindings more than once, provided each specifies a separate non-overlapping element. Apply bindings without an element applies to the whole page, so would conflict with the 'container' binding — Quango
– Quango, Commented Dec 10, 2015 at 12:39

TheRightChoyce · Accepted Answer · 2015-12-11 16:48:41Z

1

As it stands, there's really no reason to applyBindings on your DMD2 objects since there aren't any observables there.

However, to answer your question more generally, you have two options:

Call applyBindings for DMD2 against an element that doesn't contain your Container element, and isn't already contained within your Container element.

Javascript:

// DM1ViewModel is the same
var DMD2ViewModel = function() {
    this.Handler2 = function() {
        window.location='http:www.google.com';
    };
}
ko.applyBindings(new DM1ViewModel(), document.getElementById('DM1Container'));
ko.applyBindings(new DMD2ViewModel(), document.getElementById('DMD2Container'));

HTML

<div id="Container">
    <div id="DM1Container">
        <h2 data-bind="text: bId"></h2>
    </div>
    <div id="DMD2Container">
         <h2 data-bind="click: Handler2">Click me</h2>
    </div>
</div>

Make one parent view model that has each of your existing view models as observables and the use the with binding

Javascript:

var PageViewModel = function(){
    this.dm1 = ko.observable(new DM1ViewModel());
    this.dm2 = ko.observable(DMD2); // currently isn't a function, so can't call new
}

ko.applyBindings(new PageViewModel(), document.getElementById('Container'));

In your html:

<div id="Container">
    <div data-bind="with: dm1">
        <h2 data-bind="text: bId"></h2>
    </div>
    <div data-bind="with: dm2">
         <h2 data-bind="click: Handler2">Click me</h2>
    </div>
</div>

edited Dec 11, 2015 at 16:48

answered Dec 10, 2015 at 17:29

TheRightChoyce

3,0941 gold badge25 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Phils Over a year ago

I want to use without 'with binding'

TheRightChoyce Over a year ago

Updated the first option to show how you'd do it with 2 bindings. see if that helps

Collectives™ on Stack Overflow

Multiple Knockout binding with function and variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related