在foreach循環中綁定不同的Knockout JS模板

我想用KO模板將JSON文件（see here）分解成一些漂亮的網格佈局..（認爲類似於砌體/同位素佈局）..每個模板部分都會有不同大小的矩形和正方形裏面，但整體模板符合5個框寬3個框高的網格（for example）在foreach循環中綁定不同的Knockout JS模板

鑑於此我一直試圖做的是檢測模板，然後遍歷每個項目，如果它的迭代中的某個索引加載單個，雙重或三個子模板..

我的問題是，我似乎無法得到它來檢查哪個鍵在ViewTestProposal陣列IM目前..

下面是我的WIP代碼..

<div data-bind="template: {if: Template == 'basic2', visible: Template == 'basic2', foreach: ViewTestProposal}"> 
    <div data-bind="template: {if: ViewTestProposal[0], name: 'single'}"></div> 
</div> 
<script type="text/html" id="single"> 
    <div class="box single"> 
     <p data-bind="text: Artist, attr:{title: Artist}"></p> 
    </div> 
</script>

我曾試圖改變if: ViewTestProposal[0]部分with: ViewTestProposal[0]，if: ViewTestProposal() === 0和if: ViewTestProposal == 0無濟於事。

預先感謝任何幫助，您可以提供

來源

2012-10-02 haxxxton

模板名稱參數可以是返回基於陣列（See note 4）在當前項目名稱的功能。有了這個，你可以對具有模板名稱每個項目的訪問屬性：如果您需要使用項目的索引數組中

<div data-bind="template: { 
     foreach: ViewTestProposal, 
     name: function(item) {return item.boxsize;} 
    }"></div>

，這是可以通過$indexcontext property開始淘汰賽2.1版本。從版本2.2（尚未發佈[2012年1月1日]，但release candidate version available）開始，名稱函數也可以訪問上下文對象。那麼你可以這樣做：

<div data-bind="template: { 
     foreach: ViewTestProposal, 
     name: function(item, context) { 
      switch(context.$index()) { 
      case 0: 
       return 'single'; 
      case 1: 
       return 'double'; 
      // etc. 
      } 
     } 
    }"></div>

很明顯，函數本身可以在你的視圖模型中定義。

來源

2012-10-02 09:48:25

不幸的是..我只是破解它..非常感謝你的更多信息，雖然！非常感謝 – haxxxton

我試着複製並粘貼到KO模板中的代碼，它似乎不會輸出任何東西？你能提供更多嗎？ – haxxxton

我在'context。$ index'中忘記了'$'。我現在更新了它。如果您仍然遇到問題，請嘗試檢查瀏覽器的控制檯日誌是否有任何錯誤。 –

在foreach循環中綁定不同的Knockout JS模板

回答

相關問題