我如果結合淘汰賽

我有以下結構的觀察到的陣列（其中類型可以是純文本或圖片）去掉不需要的DIV或一堆文字。所以我使用if binding。該result looks the way I expected，但問題是在底層的HTML：我如果結合淘汰賽

<div data-bind="foreach: elements"> 
    <div data-bind="if: type == 'text'"><div data-bind="text: info">Hello</div>  </div> 
    <div data-bind="if: type == 'img'"></div> // Do not want it to be here 

    <div data-bind="if: type == 'text'"></div> // Do not want it to be here 
    <div data-bind="if: type == 'img'"><img data-bind="attr: { 'src': info}" src="http://cdn.zendesk.com/images/documentation/apps/logo-small.png"> 
    </div> 
</div>

它使插入空<divs>如果if語句返回false。

當我試圖達到我想要的東西與putting if and text binding in the same element我得到了以下錯誤：

Multiple bindings (if and text) are trying to control descendant bindings of the same

我怎樣才能在我的HTML輸出擺脫不必要的DIV與if結合？

如果這是不可能實現與if綁定，有沒有辦法做到這一點呢？因爲如果我不僅有type ='text'或'img'，而且還有'video'和其他一些東西，我將把它們全部放在那裏，就像一個神器一樣。

來源

2014-03-02 Salvador Dali

如果你不需要額外的div你可以使用if綁定，這是基於註釋標記的containerless control flow syntax：

<div data-bind="foreach: elements"> 
    <!-- ko if: type == 'text' --> 
     <div data-bind="text: info"></div> 
    <!-- /ko --> 
    <!-- ko if: type == 'img' --> 
     <img data-bind="attr: { 'src': info}" /> 
    <!-- /ko --> 
</div>

演示JSFiddle。

而產生的DOM會看起來像：

enter image description here

沒有多餘的div只是一些額外的意見。

要擺脫這些評論you can use templates。

來源

2014-03-02 06:14:15 nemesv

很酷謝謝你。這正是我想要的，因爲註釋不會增加DOM樹的大小。 –

你可以進一步清理這個方法，使用'template'綁定而不是一堆'if's：http://jsfiddle.net/gc4um/1/ – nemesv

你不能擺脫額外的div。我使用if綁定定期做你正在做的事情。

您收到的錯誤僅表示您具有競爭綁定，這與綁定的if和visible綁定預期相同。您的if和visible綁定應該總是高出一格，可以這麼說。

下面是使用Google開發工具的我的DOM的屏幕截圖。 Web應用程序實際上正在運行，我使用if綁定來揭示用戶選擇的視圖。

Screenshot of my DOM using Google's dev tools--web application actually running

額外的div只是在if結合的神器。

如果你考慮一下，如果if綁定完全消失，當滿足條件並且應該顯示該部分視圖時，DOM中剩下的什麼可以重構它？

UPDATE

在重新考慮template方法，可以推邏輯進入視圖模型（VM），結合模板的name到可觀察在VM，然後動態地設定基於該模板那邏輯。但是，模板本身將在DOM中運行。所以我認爲這裏沒有淨收益。

來源

2014-03-02 04:51:51

感謝您的回答。你確定無法擺脫這些額外差異嗎？可能與模板或其他東西，不一定與綁定。 –

@SalvadorDali不客氣。我一般都不會說所有的方法，因爲我沒有真正努力消除空白的div。但我希望邏輯是相同的：_Something_必須保留以允許基於「if」綁定或「模板」綁定或綁定「x」的條件進行重構（將調用「x」）。 – 2014-03-02 05:08:02

@SalvadorDali我剛剛編輯了我的答案。 – 2014-03-02 05:27:38

我如果結合淘汰賽

回答

相關問題