knockout ascx not functioning

Question

I'm currently developing an web application that has some UI controls that I need to be binded by Knockout. The structure is the following: MainPage.aspx -> _manageStructures.ascx -> _editStructure.ascx; All of these render in the same page, adding the new components by AJAX. The MainPage binding works perfectly, but the _editStructure doesn´t seem to get the binding values. What I've done was create a ModelView.js file that has the two ViewModels that I need in my app, and then a "NameSpace" function that returns a global object.

function v1 (name){
 this.name = ko.observable(name);
}
function v2(views){
 this.views = ko.observable(views);
}

function NameSpace() { }

var global = new NameSpace();

So, when I need to apply some binding what I do is:

var v  =new V1("luis");
global.v1 = v;

ko.applyBindings(global);

Then, on my HTML what I do is:

<input data-bind="value: v1.name" />

Now, the problem is that I can only make it work on the Main Page.

When I try to bind V2 values to inputs on my EditPage, the value is allways null

In my _manageStructure.ascx I have an action link that will render the _editStructure in the web page when clicked. When I do this in the same page it doesn´t work, but if I open it on a new tab it works perfectly...

Answer 1

You can pass a second parameter to define which part of the document you want to search for data-bind attributes. For example, ko.applyBindings(myViewModel, document.getElementById('someElementId')). This restricts the activation to the element with ID someElementId and its descendants, which is useful if you want to have multiple view models and associate each with a different region of the page.