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

Posted 2023-05-09

【中文标题】如何使用 Knockout.js 将多个 View 绑定到单个 ViewModel

【英文标题】：How to bind multiple Views to a single ViewModel with Knockout.js

【发布时间】：2014-07-30 20:27:36

【问题描述】：

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

谁能告诉我如何使用 Knockout.js 做到这一点？

例如：第 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 对象

【参考方案1】：

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

ko.applyBindings(viewModel, domElement);

如果您的所有视图都有一个共同的父级（DOM 元素），请将其用作domElement。

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

【参考方案2】：

将所有三个 viewModel 声明为全局对象，而不将 var 放在它们前面，它们将在您的代码中随处可用。

【讨论】：

OP 想要链接一个 Single Viewmodel