使用Knockout.js在jQuery Mobile中将模型对象与多个页面绑定

Question

I have knockout js Model, I want to bind that to two pages in jQuery mobile, the first page only contains read only attributes of the model and other page contains elements with which the user can update fields.

function ModelViewObject(){
    this.id = "1001";
    this.firstName = ko.observable("First Name"); 
    this.lastName = ko.observable("Last Name");
}

//This page only contains read only values
<div data-role="page" id="pageOne">
    <h1>Id : <span data-bind="text: id()</h1>
</div>

//This page can edit
<div data-role="page" id="pageTwo">
   <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
</div>

I could bind it first page or second page at a time.I want to bind the model with two pages, I would really appreciate if some one can help me to solve this.

Thank you.

Answer 1

You can bind this way

ko.applyBindings(new ModelViewObject(), document.getElementById("pageOne"));
ko.applyBindings(new ModelViewObject(), document.getElementById("pageTwo"));