Canjs - 迭代列表時何時使用哪個mustache標記？

Question

Can.js中似乎有幾種不同的方法可以做同樣的事情，這太棒了！但是其中一些方式的工作方式與其他方式稍有不同，並且可能會影響DOM如何呈現和更新。如果有人能澄清這個細微差別，我會很感激。

我認爲這個選擇變得有趣的場景是當你想要一個默認文本或一個空列表的佔位符。

{{#if list}} and {{#if list.length}}

這些都是不一樣的。空數組和can.List都將渲染爲{{#if list}}。

fiddle

{{#each list}}

因此，使用我們與#if了...

{{#if list.length}} 
    <ul> 
     {{#each list}} 
     <li>...<li> 
     {{/each}} 
    </ul> 
{{else}} 
    <i>The list is empty.</i> 
{{/if}} 

{{#list}}

我認爲這旨在兩全其美的。今天我只想到，由於這是一個幫助程序，它支持{{else}}。

{{#list}} 
    rendered for each item in list 
{{else}} 
    rendered once if list is empty 
{{/list}} 

問題是，這不能產生我們用#each做的html。

• 裹在<ul>標籤整個事情，它就會不顧渲染列表爲空或不
• 棒的<ul>標籤中的第一個塊（正塊？肯定？），它使每一次

所以實現似乎依賴於標記。很公平。

這是蹭。

據推測，#each和#list不同地更新DOM。來自#each的文檔...

如果密鑰的值是can.List，則在列表更改時會更新生成的HTML。當列表發生變化時，只發生最小量的DOM元素變化。

因此，添加一個項目到列表中，只有該項目被渲染，刪除一個項目，只有該元素被刪除。 #list的行爲沒有記錄，但我覺得它可能會重新渲染整個塊。

問題

哪一個最好？除了更簡潔之外，我不確定#list有什麼優勢，那麼爲什麼作者建議它是首選呢？

Answer 1

假設列表是一個can。列表實例：

{{#if list}} 將檢查列表的真值。這類似於檢查任何JS對象的真值，並且將導致爲真，無論列表內容或長度如何。

{{#if list.length}}將檢查長度屬性的真值。如果你有一個空列表，長度將是0，所以#if將導致false，並且不會呈現內容。如果長度> = 1，則結果爲true，並且#if的內容將被渲染。

#each和#list都遍歷can.List的一個實例，但是我們以不同方式設置綁定。

#each將在每個正在迭代的單個項目上設置綁定，而#list不會。這在兩種情況下有所不同：

1）您有一個大的列表，在初始渲染之後計劃的更新最少。在這種情況下，#list可能會更有優勢，因爲會有更快的初始渲染。但是，如果列表的任何部分發生更改，整個#list區域將被重新處理。

2）您有一個很大的列表，在初始渲染後計劃了很多更新。例如，具有許多可編輯字段列的網格。在這種情況下，即使在初始渲染時（我們設置了更多綁定），您也會想要使用#each，但由於現在有很多部分，所以您的更新速度會更快。

你的案件

快速注的名單，如果有內容......，否則空單區：循環通過列表項

{{#each項目}} ！ {{/ each}}

{{^ if items.length}} 顯示是否沒有項目！ {{/ if}}

上面應該說明這種情況。如果還有其他邏輯，我會考慮編寫一個自定義幫助器（取決於邏輯的外觀）。