有沒有什麼方法可以不加載帶有淘汰條件的元素？

Question

我有一個項目列表，可以是兩種類型之一 - 取決於類型，我需要使用不同的樣式/佈局。我現在正在做的是迭代所有項目，併爲每個項目顯示兩個「模板」，但每個項目只顯示一個模板，具體取決於type（）的評估方式。這看起來很不雅觀，因爲我實際上只需要一個模板一個模板 - 頁面上一半的標記永遠不會被看到。

有什麼辦法我只能加載我需要這些項目的標記，而不會將它們分成兩個不同的數組？

Answer 1

是的，這樣的事情應該爲你工作。

<div data-bind="foreach: yourArray"> 

    <div data-bind="if: isTypeOne"> 
     <div>template for type one</div> 
    </div> 

    <div data-bind="if: isTypeTwo"> 
     <div>template for type two</div> 
    </div> 

</div> 

這樣，每個條件標籤內部的模板只在評估爲真時生成。

Answer 2

你應該做的是把你的兩個「模板」放入real模板中，並添加一個計算的observable，它決定使用哪個模板。如果你的模板非常複雜或者你有許多不同的模板可能顯示，這將會特別有用。

例如，假設你有一個用戶：

function User(user) { 
    this.name = ko.observable(user.name); 
    this.isSuperUser = ko.observable(user.isSuperUser); 

    // this chooses which template to use   
    this.userTemplate = ko.computed(function() { 
     return this.isSuperUser() 
      ? "userTemplate-superuser" 
      : "userTemplate-user"; 
    }, this); 
} 

鑑於用戶的列表，您可以顯示基於什麼userTemplate是合適的模板。

<div data-bind="foreach: users"> 
    <div data-bind="template: userTemplate"></div> 
</div> 

<script id="userTemplate-superuser" type="text/html"> 
    <div class="su"> 
     Greetings super user <span data-bind="text: name"></span> 
    </div> 
</script> 
<script id="userTemplate-user" type="text/html"> 
    <div class="u"> 
     Greetings regular user <span data-bind="text: name"></span> 
    </div> 
</script> 

demo