KnockoutJS只顯示我的模板，如果我有一個額外的li

所以我有一個模板，我正在使用一些對可能有子元素的對象進行遞歸。我已經得到了if語句的工作方式，我希望如何（我認爲）。但是，如果我在if語句之前有額外的li，我的子元素纔會顯示出來。KnockoutJS只顯示我的模板，如果我有一個額外的li

這裏是我的模板

<script type="text/html" id="journalTemplate"> 
<li data-bind="text: Description"> 
    <div> 
    <li data-bind = "visible: IsGroup"></li> 
    <!-- ko if: IsGroup --> 
    <ol data-bind="template: {name: 'journalTemplate', foreach: ChildEntities}"> 
    </ol> 
    <!-- /ko --> 
    </div> 
</li>

我使用數組的映射，所以沒有真正的視圖模型來展示，但C＃對象很簡單：它有一個說明，一個布爾IsGroup ，以及一個ChildEntities列表（如果IsGroup爲false，則爲null，作爲附註）。如果我沒有空li，if語句的註釋塊甚至不會顯示出來。

任何想法？

來源

2012-05-22 Colin DeClue

我不是很追隨。上面的模板有效嗎？或者在KO if語句之前需要另一個LI元素才能工作？目前您的標記無效。你不能在div裏面有一個LI元素。 – madcapnmckay

你可以添加你的問題的jsfiddle。 – madcapnmckay

@madcapnmckay：現在它可以工作，但是當我實際上不需要那個li時，它有

。我只是想要文本和子文件。（我已經刪除了div，我只是補充說希望能夠解決我的問題，但它沒有）。我不知道如何建立一個jsfiddle，因爲我正在從我的數據庫中的實際數據填充我的js對象。不過，我會開始嘲笑一些東西。 –

好的，我看到了問題。問題在於你的文本在你的LI上綁定。

html中的文本由textNode dom元素表示，雖然它們不能在html標記中明確寫入，但它們的行爲方式相同。有效地，您的文本綁定將使用任何文本替換您的LI的innerHtml。

什麼我就不太清楚的是爲什麼你其他無效LI元素停止徹底更換的innerHTML的...

反正正確的解決方案是構建模板這樣。

<script type="text/html" id="journalTemplate"> 
    <li> 
     <span data-bind="text: Description"></span> 
     <!-- ko if: IsGroup --> 
     <ol data-bind="template: {name: 'journalTemplate', 
        foreach: ChildEntities}"> 
     </ol> 
     <!-- /ko --> 
    </li> 
</script>

http://jsfiddle.net/madcapnmckay/F2vSW/1/

希望這有助於。

來源

2012-05-22 18:37:26 madcapnmckay

我在你發佈之前就已經想好了。不過，不知道爲什麼多餘的東西解決了它。不管怎樣，謝謝！ –

KnockoutJS只顯示我的模板，如果我有一個額外的li

回答

相關問題