Question

我是knockout.js的新手，想知道如何将多个视图链接到单个ViewModel。我在不同的HTML页面中有3个视图，当我在第3页时，“onclick”按钮我希望能够获得所有3个视图的JSON对象。

任何人都可以告诉我如何使用Knockout.js完成这项工作？

Ex：第1页

 <div data-role="page" id="Page1">
<div data-role="header">
    <h1>Simple counter</h1>
</div>
<div data-role="content">
    <p>You have clicked the button <span data-bind="text: count"></span> times.</p>
    <input data-bind="value: YourName">Your Name: </input>
    <input type="button" value="Convert To JSON" data-bind="click: ConvertToJSON" />

</div>

第2页

  <div data-role="page" id="Page2">
<div data-role="header">
    <h1>Page2</h1>
</div>
<div data-role="content">
    <p>Hey Hey Hey <span data-bind="text: pagecount2"></span>.</p>  <br />

    This is supposed to be the number from the previous page <span data-bind="text: testspan"></span>
    <input type="button" value="Convert To JSON" data-bind="click: ConvertToJSON2" />
    <script type="text/javascript" >
  var Page2ViewModel = function() { alert("Page2");

     this.pagecount2 = ko.observable(0);
     this.testspan = ko.observable(100);
     this.ConvertToJSON2 = function() {

            var data = ko.toJSON(this); 
            $.ajax({
                type: 'POST',
                url: '/Person/Save',
                data: data,
                dataType: 'json',
                beforeSend: function() {
                    alert(data);
                },
                success: function (data) {
                    alert(data);
                }
            });
        };
    };

    ko.applyBindings(new Page2ViewModel(), document.getElementById("Page2")); 


    </script>     
</div>
<script type="text/javascript">

</script>

单击ConvertToJson2时，我想要一个{"count": "", "YourName":"", "pagecount2":"", "testspan":""}

的JSON对象

Answer 1

您可以使用以下命令绑定DOM元素及其所有子元素：

ko.applyBindings(viewModel, domElement);

如果您有一个包含所有观看次数的公共父级（DOM元素），请将其用作domElement。

否则，您可以使用相同的viewmodel ko.applyBindings使用相同的DOM元素。请记住，DOM元素只能链接到一个视图模型。

Answer 2

将所有三个viewModel声明为全局对象，而不将var放在它们前面，并且它们随处可见。

如何使用Knockout.js将多个视图绑定到单个ViewModel

2 个答案: