Knockout無容器控制流語法不執行數據綁定

Question

我想使用Knockout的無容器控制流語法沒有太多運氣。那麼，實際的控制流程正在工作，但子元素HTML元素沒有被綁定。

我有一個簡單的目標：

function Person(name, vegetarian) { 
    var self = this; 
    self.name = name; 
    self.vegetarian= vegetarian; 
} 

我希望所有的人的名單，並鏈接到素食協會，如果他們是素食主義者。

<ul data-bind="foreach: people"> 
<li> 
     <!-- ko if: vegetarian() --> 
     <a href="http://www.vegsoc.org"> 
     <!-- /ko --> 
     <span data-bind="text: name"></span> 
     <!-- ko if: vegetarian() --> 
     </a> 
     <!-- /ko --> 
    </li> 
</ul> 

http://jsfiddle.net/mxmS9/

爲什麼我的2人沒有得到顯示在列表中？

刪除ko評論，你至少會看到foreach工作正常。

我正在使用無容器控制流語法，因爲在我的實際項目中，本例中有比簡單的<span>更多的HTML，我不想重複它。

淘汰賽V2.3.0

Answer 1

你不能用這種方式在無容器控制流語法，因爲你不能打破一個N元素的開放/關閉標籤和他們在一起。

你需要做的就是重複共同的內容：

<ul data-bind="foreach: people"> 
    <li> 
     <!-- ko if: vegetarian --> 
     <a href="http://www.vegsoc.org"><span data-bind="text: name"></span></a> 
     <!-- /ko --> 
     <!-- ko ifnot: vegetarian --> 
      <span data-bind="text: name"></span> 
     <!-- /ko --> 
    </li> 
</ul> 

或者，如果你有更多的內容，你不想重複它移動到模板的內容：

<ul data-bind="foreach: people"> 
    <li> 
     <!-- ko if: vegetarian --> 
     <a href="http://www.vegsoc.org" data-bind="template: 'linkTemplate'"></a> 
     <!-- /ko --> 
     <!-- ko ifnot: vegetarian --> 
      <!-- ko template: 'linkTemplate'--><!-- /ko --> 
     <!-- /ko --> 
    </li> 
</ul> 
<script type="text/html" id="linkTemplate"> 
    <span data-bind="text: name"></span> 
</script> 

演示JSFiddle。