Knockoutjs適用於多個html節點

我有多個視圖模型，我正在頁面上運行，以解決任何潛在的衝突，我將父節點添加到基本應用綁定文本。然而，我遇到的其中一個問題是，我無法再使用這些節點之外的屬性。我試圖找出是否有任何方法來更新視圖模型綁定之外的單個html節點，我也綁定了該模型。Knockoutjs適用於多個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>

來源

2015-12-18 adc90

只需創建一個稍微複雜視圖模型。 – Andrei

你解決了嗎？請閱讀答案 –

只要把它放在它自己的容器中。

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

來源

2015-12-18 17:56:16 Bindrid

您可以在多個位置相同的視圖模型綁定，即只加

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

順便說一句，你有你的HTML :)

來源

2015-12-18 18:12:15 DonovanM

「notifiy」你可以申請綁定在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>

來源

2015-12-18 18:19:04

Knockoutjs適用於多個html節點

回答

相關問題