有條件地渲染容器

是否可以根據條件使用knockout.js爲模板渲染容器？有條件地渲染容器

這並不工作，但顯示了我想做的事：

<div data-bind="foreach: items"> 
<!-- ko if: $data.startContainer --> 
<div class="container"> 
<!-- ko --> 

<div data-bind="html: $data.contentElement"></div> 

<!-- ko if: $data.endContainer --> 
</div> 
<!-- ko --> 
</div>

來源

2013-05-07 Anri

所以，我只想澄清，你的名單將開始容器之前進行渲染。在某些時候，元素將開始在容器內呈現。到達列表的另一個位置後，元素將開始在容器之後呈現。是對的嗎？如果這就是目標，你是否已經分別考慮了3個foreach和之前，之內和之後的元素的計算列表？ – 2013-05-07 20:31:26

是的，你是對的。 3 foreache's可能是一種選擇，但真實情況要複雜得多，難以改變，我很感興趣，如果淘汰賽模板足夠靈活，可以做到這一點 – Anri 2013-05-07 20:50:42

上找到knockout.js網站GitHub的一個線程，表示這是不可能與本地模板型號： https://github.com/SteveSanderson/knockout/issues/307

顯然，關閉評論被理解爲內部的不封閉的div標籤。

我的希望是在動態模板上，但也失敗了，就像在小提琴中所示。

http://jsfiddle.net/XbdGs/3/

<script type="text/html" id="withContainer"> 
    <div class="container"> 
     <!-- ko template: 'withoutContainer' --> 
     <!-- /ko --> 
    </div> 
</script>

，從我的結論，你可以嘗試3個foreachs解決方案，使用Posthuma建議或退回到喜歡jquery.tmpl或下劃線另一個模板引擎的淘汰賽文檔提到。

http://knockoutjs.com/documentation/template-binding.html

來源

2013-05-07 19:50:53

您可以通過自定義綁定做到這一點。

更新：

如果你想開一個div，並從另一個項目結束時，自定義綁定是這樣的：

ko.bindingHandlers.myCustomBinding = { 
update: function(element, valueAccessor, allBindings, data, context){ 
    var value = valueAccessor(); 
    var items = ko.utils.unwrapObservable(value); 
    var currentElement = element; 
    ko.utils.arrayForEach(items, function(item){ 
     if(item.startContainer){ 
      var container = document.createElement('div'); 
      $(container).append(item.displayContent);     
      $(container).addClass("container"); 
      currentElement = container;     
     } 
     else if(item.endContainer){ 
      $(currentElement).append(item.displayContent); 
      $(element).append(currentElement); 
      currentElement = element; 
     } 
     else{     
      $(currentElement).append(item.displayContent); 
     }    
    }); 
    } 
};

HTML：

<div data-bind='myCustomBinding: items'></div>

有可能是更好的方法來編寫代碼，並可能使用內置的綁定，但這應該足以讓你開始。

http://jsfiddle.net/posthuma/f5wG4/2

來源

2013-05-07 20:31:35 Posthuma

謝謝，但不是我所需要的。我需要將一些元素包裝在一個容器中，而不是每個都包含在它自己的容器中。這就是爲什麼在我的代碼片段中，我打開和關閉容器有不同的綁定 – Anri 2013-05-07 20:52:01

有條件地渲染容器

回答

相關問題