KO綁定問題

Question

我正在使用KO將一個對象綁定到perticular div。以下是我的代碼。

<div> 
    <label>Name</label> 
    <input type="text" data-bind="value: name" /> 
</div> 
<div id="testDiv" style="border:solid red"> 
    <label for="txtProductName">Product Name</label> 
    <input type="text" id="txtProductName" name="txtProductName" data-bind="value: ProductName"/> 
</div> 

@section scripts{ 
    <script src="~/Scripts/knockout-2.1.0.js"></script> 
    <script type="text/javascript"> 
     $(function() { 

      var ViewModel = function() { 
       var self = this; 
       self.name = ko.observable("Hemant"); 
       self.age = ko.observable(50); 
       self.address = ko.observable("Pune");     
      }; 

      var vm = new ViewModel(); 
      ko.applyBindings(vm); 

      var product = { 
       ProductName: ko.observable(), 
       Price: ko.observable(), 
       Desc: ko.observable() 
      };   
      ko.applyBindings(product, $('#testDiv')[0]); 
     }); 
    </script> 
} 

'名稱' 字段是否正確連接。但我無法綁定'ProductName'。獲取以下錯誤信息

Message: TypeError: 'ProductName' is undefined;

你能幫忙嗎？ Registers， Hemant

Answer 1

您的初始applyBindings將vm應用於整個頁面，因此調用第二個applyBindings不會將產品正確綁定到div。所以淘汰賽試圖讓ProductName關掉vm。

您可以綁定虛擬機到div上面，要麼做產品VM的性能

var ViewModel = function() { 
    var self = this; 
    self.name = ko.observable("Hemant"); 
    self.age = ko.observable(50); 
    self.address = ko.observable("Pune"); 
    self.Product = { 
     ProductName: ko.observable(), 
     Price: ko.observable(), 
     Desc: ko.observable() 
     } 
    }; 

然後你可以使用一個具有約束力的在您的div目標產品：

<div id="testDiv" style="border:solid red" data-bind="with: Product"> 
    <label for="txtProductName">Product Name</label> 
    <input type="text" id="txtProductName" name="txtProductName" data-bind="value: ProductName"/> 
</div> 

還有第三種方式，您可以將特定視圖模型綁定到頁面的不同部分：

ko.bindingHandlers.stopBinding = { 
    init: function() 
    { 
     return { controlsDescendantBindings: true }; 
    } 
}; 

ko.virtualElements.allowedBindings.stopBinding = true; 

然後使用：

<!-- ko stopBinding: true --> 
<!-- /ko --> 

在您的網頁HTML註釋停止結合。