javascript - Knockout.js - How to change the viewmodel - Stack Overflow

admin管理员组

文章数量:1279188

I'm trying to change the view model which is bound to some part of a DOM template (instead of changing the values of the view model) but I just can't figure out how or if it's even possible

Here's the scenario:

• Create a new View Model object
• Bind it (e.g. applyBindings(myViewModel)
• Create another View Model object
• Bind the new object to the same part of the DOM so all elements are now bound to the new object.

I want to do the equivalent of changing the value of DataContext of a control in WPF (on which KO's MVVM pattern is based)

The reason for this is that I'm trying to use the same view model for both the representation of the object in a list and the representation of the object in its own view, so I already have a view model for all objects being shown in the list.

There are other workarounds but I think this would be the most elegant way to do it.

I'm trying to change the view model which is bound to some part of a DOM template (instead of changing the values of the view model) but I just can't figure out how or if it's even possible

Here's the scenario:

• Create a new View Model object
• Bind it (e.g. applyBindings(myViewModel)
• Create another View Model object
• Bind the new object to the same part of the DOM so all elements are now bound to the new object.

I want to do the equivalent of changing the value of DataContext of a control in WPF (on which KO's MVVM pattern is based)

The reason for this is that I'm trying to use the same view model for both the representation of the object in a list and the representation of the object in its own view, so I already have a view model for all objects being shown in the list.

There are other workarounds but I think this would be the most elegant way to do it.

• javascript
• mvvm
• knockout.js

Share Improve this question Follow asked Dec 26, 2012 at 5:14 Juan CampaJuan Campa 1,24122 gold badges1515 silver badges2121 bronze badges 2

• Can you show your js code in jsfiddle ? – Sinan AKYAZICI Commented Dec 26, 2012 at 10:00
• Sure. jsfiddle/e29EZ/1 open the js console to see that the callback is executed twice. This other fiddle jsfiddle/e29EZ/6 is using cleanNode (thanks to nathan gonzález below) but it's still executing the callback twice. – Juan Campa Commented Dec 26, 2012 at 15:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

There are two way of working with multiple viewmodel. The first way is to do multiple binding like @nathan gonzalez said. You should do binding up your viewmodels. However this plicates things a bit. Therefore difficult to manage.

The second way is to use master viewmodel. I would remend this.

http://jsfiddle/sinanakyazici/e29EZ/10/

<div data-bind="with: mainvm">
    <span data-bind="text: prop, click : action"></span>
</div>

var vm = function(value)
{
    this.prop = ko.observable(value);
    var self = this;
    this.action = function() {
        console.log("clicked: " + self.prop());
    }
}

var master = {
    mainvm : ko.observable(null)
}

master.mainvm(new vm('viewmodel 1'));
master.mainvm(new vm('viewmodel 2'));
ko.applyBindings(master);

so ko.applyBindings() should cover this for you. you can pass in a 2nd parameter that tells which top level element to apply the bindings to, like so:

 ko.applyBindings(myExistingViewModel, $('#someElementId')[0]);

you may want to clean the elements first though, like this:

ko.cleanNode($('#someElementId')[0]);

this pletely removes the bindings and clears the in memory data for that element and its children bindings.

本文标签： javascriptKnockoutjsHow to change the viewmodelStack Overflow