淘汰賽，如果綁定與布爾值不正確評估

Question

我在我看來，使用跨度顯示只讀視圖和顯示編輯視圖的輸入以下內容。

<span data-bind="{ ifnot:IsEditing, text:SystemName }"></span> 
<input type="text" id="SystemName" data-bind="{ if:IsEditing, value:SystemName }" /> 

IsEditing observable正在評估爲false。我返回具有以下層次結構的JSON。

Project 
    . 
    . 
    Systems (collection) 
    SystemName 

我加載在通過JQuery的值，使用以下創建可觀察模型：

$.ajax({ 
    type: "get", 
    url: "..", 
    success: function (d) { 
     var pList = []; 

     for (var p = 0, plen = d.Data.length; p < plen; p++) { 
      var proj = d.Data[p]; 
      var systems = proj.Systems; 
      var sList = []; 

      proj = ko.mapping.fromJS(proj); 

      for (var s = 0, slen = systems.length; s < slen; s++) { 
       sList.push(ko.mapping.fromJS(systems[s])); 
      } 

      proj.Systems = ko.observableArray(sList); 

      pList.push(proj); 
     } 

     window["model"].projects(pList); 
    }, 
    error: function (e) { 
     debugger; 
     alert("An error occurred"); 
    } 
}); 

上的負載，每當模型被加載並且這個表達式，兩個元件總是顯示而不是顯示跨度和隱藏輸入。當我將其更改爲可見綁定時，只顯示跨度。爲什麼當IsEditing評估爲false時，輸入與if綁定一起顯示？

Answer 1

如果您的IsEditing可觀察到，if綁定應正確評估它。

然而，if綁定應該應用於「容器狀」元素，例如，在可以具有子元素的元素上。

的documentation有點混亂，談到包含標記：

的，如果結合，然而，物理添加或DOM中的刪除包含標記，

因爲input不能有子元素if不能從input中刪除任何東西。您需要將input包裝成一個div和應用存在的if或者你可以使用容器裝訂語法：

<!-- ko if: IsEditing --> 
    <input type="text" id="SystemName" data-bind="{ value: SystemName }" /> 
<!-- /ko --> 

演示JSFiddle.