1

Consider this sample code from the very first Knockout tutorial:

<p>First name: <strong data-bind="text: firstName">todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

<script>
    function AppViewModel() {
        this.firstName = "Bert";
        this.lastName = "Bertington";
    }
    ko.applyBindings(new AppViewModel());
</script>

How does Knockout know that text: firstName in the HTML refers to the firstName property of AppViewModel, and not the firstName property of some other model? Does it simply infer this, based on the facts that (a) the HTML asks Knockout to bind it to a property named firstName, and (b) AppViewModel happens to have a property named firstName?

I would expect that my data-bind attribute would have to specify the model associated with the view, as well as the property, so that Knockout would know which model to find that property in.

After all, it's entirely possible that I could have another model with the same property names:

<script>
    function AppViewModel() {
        this.firstName = "Bert";
        this.lastName = "Bertington";
    }
    function OtherModel() {
        this.firstName = "Chet";
        this.lastName = "Chesterson";
    }
    ko.applyBindings(new AppViewModel());
    ko.applyBindings(new OtherModel());
</script>

(I actually tried the above code, and it seems that Knockout binds whichever model is passed to applyBindings() first, and ignores the second.)

I'm just learning Knockout, and I'm sure this is pretty elementary. But I've worked my way through the first four tutorials, and done some side reading, and nothing I've seen addresses this basic question.

greenie2600
  • 1,679
  • 3
  • 17
  • 24
  • http://stackoverflow.com/questions/9293761/knockoutjs-multiple-viewmodels-in-a-single-view – Neil Thompson Feb 28 '14 at 22:06
  • I think you answered your own question. I believe it's expected taht you only call .applyBindings once. The view model you pass is what gets bound. The data-bind attribute tells KO which property. – Kevin Feb 28 '14 at 22:06
  • You can also applyBindings to multiple nodes in your DOM...apply bindings does take a second parameter that is the element you'd like to bind to...so you could make both your bindings work if you had 2 separate elements, each with unique ID's...getElementById('xxx') – beauXjames Feb 28 '14 at 22:12

1 Answers1

3
ko.applyBindings(new AppViewModel());

applies your bindings to the entire document. Knockout doesn't expect you to bind multiple viewmodels to the same HTML. That's why theres the option to apply bindings on a section of your HTML document.

ko.applyBindings(new AppViewModel(), document.getElementById('test'));
user1534664
  • 3,258
  • 8
  • 40
  • 66
  • So a Knockout model represents the entire state of my application? In contrast to the "models" in other MV* paradigms, which represent discrete objects within the application? – greenie2600 Feb 28 '14 at 22:32
  • Yes, a viewmodel is the representation of the data in your UI. By binding it to elements with the data-bind attribute, knockout will automatically update your UI when your viewmodel propertys change, and vice versa. Knockout is a MVVM, which uses the same pattern as MVC but it adds in the viewmodel to easily manage your UI. – user1534664 Feb 28 '14 at 22:44