Knockoutjs将biding应用于多个html节点

Knockoutjs apply biding to multiple html nodes

本文关键字：html 节点 应用于 biding Knockoutjs      更新时间：2023-09-26

我在一个页面上运行了多个视图模型，为了解决任何潜在的冲突，我将父html节点添加到了敲除应用绑定文本中。然而，我遇到的一个问题是，我不能再拥有这些节点之外的属性。我试图弄清楚是否有任何方法可以更新视图模型绑定之外的单个html节点，我也绑定了该模型。

<html>
<head>
    <script>
        function VM1() {
            this.ViewModelProp1 = ko.observable(1);
            this.NotficationsNumber = ko.observable(1);
        }
        function VM2() {
            this.ViewModelProp2 = ko.observable(1);
        }
        ko.applyBindings(VM1, document.getElementById('vm1'));
        ko.applyBindings(VM1, document.getElementById('vm2'));
    </script>
</head>
<body>
    <!-- I want this property applied to the VM1 -->
    <h1 id="notifiy" data-bind="text: NotficationsNumber"></h1>
    <p id="vm1">
        <strong data-bind="text: ViewModelProp1"></strong>
    </p>
    <p id="vm2">
        <strong data-bind="text: ViewModelProp2"></strong>
    </p>
</body>
</html>

只需将其放入自己的容器中即可。

<html>
<head>
    <script>
        function VM1() {
            this.ViewModelProp1 = ko.observable(1);
            this.NotficationsNumber = ko.observable(1);
        }
        function VM2() {
            this.ViewModelProp2 = ko.observable(1);
        }
        ko.applyBindings(VM1, document.getElementById('div1'));
        ko.applyBindings(VM1, document.getElementById('vm2'));
    </script>
</head>
<body>
<!-- I want this property applied to the VM1 -->
  <div id='div1'>
     <h1 id="notifiy" data-bind="text: NotficationsNumber"></h1>
    <p id="vm1">
        <strong data-bind="text: ViewModelProp1"></strong>
    </p>
</div>
<p id="vm2">
    <strong data-bind="text: ViewModelProp2"></strong>
</p>
</body>
</html>

您可以在多个地方绑定同一个视图模型，即只添加

ko.applyBindings(VM1, document.getElementById('notify'));

顺便说一句，你的HTML中有"notify"：）

您可以在DOM中的每个节点中应用绑定，但您想要的是更改另一个绑定到DOM中的viewModel，对吧？因此，您可以使用ko.dataFor(element)将视图模型绑定到元素中，请参见片段：请参阅片段：

注意：这是解决这个问题的方法之一

function VM1() {
  this.ViewModelProp1 = ko.observable("VM 1");
  this.NotficationsNumber = ko.observable("VM 1");
}
function VM2() {
  this.ViewModelProp2 = ko.observable("vm2");
}
function updater(){
   this.textUpdate = ko.observable("Update");
   this.textUpdate.subscribe(function(nvalue){
       var vm1 = ko.dataFor( document.getElementById('div1'));
       vm1["ViewModelProp1"](nvalue);
   },this);  
};
ko.applyBindings(new updater(), document.getElementById('updater'));
ko.applyBindings(new VM1(), document.getElementById('div1'));
ko.applyBindings(new VM2(), document.getElementById('vm2'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<html>
<head>
    <script>
       
    </script>
</head>
<body>
  
  <div id="updater">
    <input type="text" data-bind="textInput: textUpdate"/>
  </div>
  
<!-- I want this property applied to the VM1 -->
  <div id='div1'>
     <h1 id="notifiy" data-bind="text: NotficationsNumber"></h1>
    <p id="vm1">
        <strong data-bind="text: ViewModelProp1"></strong>
    </p>
</div>
<p id="vm2">
    <strong data-bind="text: ViewModelProp2"></strong>
</p>
</body>
</html>

相关文章：