Mustache.js - 只渲染陣列的數量有限的對象

Question

最近，我繼承了這從另一個開發者，什麼被留下，我有我難住了。

我想建立一個建立在我的JSON數組中的第3個對象通過小鬍子呈現在頁面上，然後用一個點擊，未來3負荷，等等。我現在被卡住的地方只是弄清楚如何讓小鬍子只渲染3個物體。我已經做了相當多的搜索，但我似乎無法找到語法。

沒有用「負載更多」按鈕相關聯還代碼。我想我會從拼圖的第一部分開始。

另外，有比鬍子更好的解決方案，這種佈局的？

這是我到目前爲止有：

<div id="bios"></div> 

<!-- JSON data --> 
<div id="divInsightsData"> 
    <script> 
    var prof_data = { 
     bios: [ 
      { name: "John Smith", 
       title: "Title 1", 
       office: "New York" 
      }, 
      { name: "John Smith", 
       title: "Title 2", 
       office: "New York" 
      }, 
      { name: "John Smith", 
       title: "Title 3", 
       office: "New York" 
      }, 
      { name: "John Smith", 
       title: "Title 4", 
       office: "New York" 
      }, 
      { name: "John Smith", 
       title: "Title 5", 
       office: "New York" 
      }, 
      { name: "John Smith", 
       title: "Title 6", 
       office: "New York" 
      } 
     ]}; 

    var template="{{#bios}}<div class='bio'><p class='author-details'>{{name}}</p><p class='author-details'>{{title}}</p><p class='author-details'>{{office}}</p></div>{{/bios}}"; 
    var html = Mustache.render(template, prof_data); 
    $("#bios").append(html); 

    </script> 
</div> 

<a href="#" class="load-more">Load More</a> 

Answer 1

如果只有數組的第3個元素是你展示什麼，那麼整個陣列不您的視圖模型，你應該不把它傳遞給鬍子。

它可以通過一個函數來小鬍子對於這一點，但它不是「鬍子之路」

你有邏輯少你的鬍子模板，更多的調試能力和維護它們。這是使用Moustache進行模板化的強項。他們應該接受你的視圖模型，並接受它，而不是將邏輯應用到它並嘗試操縱它。

比方說，你有你的

var prof_data = { 
     bios: [ 
      { name: "John Smith", 
       title: "Title 1", 
       office: "New York" 
      }, 
      { name: "John Smith", 
       title: "Title 2", 
       office: "New York" 
      }, 
      { name: "John Smith", 
       title: "Title 3", 
       office: "New York" 
      }, 
      { name: "John Smith", 
       title: "Title 4", 
       office: "New York" 
      }, 
      { name: "John Smith", 
       title: "Title 5", 
       office: "New York" 
      }, 
      { name: "John Smith", 
       title: "Title 6", 
       office: "New York" 
      } 
     ]}; 

您可以創建一個：

var prof_data_viewmodel = { 
     bios: prof_data.bios.slice(0,3) 
    }; 

，並傳遞到小鬍子，而不是