Question

我有多个视图模型，我在页面上运行，以修复我将父html节点添加到knockout apply bindings文本的任何潜在冲突。然而，我遇到的一个问题是我不能再是这些节点之外的属性。我试图弄清楚是否有任何方法可以更新视图模型绑定之外的单个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>

Answer 1

把它放在自己的容器里。

<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>

Answer 2

您可以在多个位置绑定相同的视图模型，即只需添加

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

是的，你的HTML中有'notifiy'：）

Answer 3

您可以在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>

Knockoutjs将绑定应用于多个html节点

3 个答案: