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) 
    }; 

，并传递到小胡子，而不是