Question

我最近从另一位开发者那里继承了这个，而对我来说遗留下来的东西让我感到难过。

我正在尝试构建一个设置，其中我的JSON数组中的前3个对象通过小胡子在页面上呈现，然后单击，下一个3加载，依此类推。我现在被困住的地方就是弄清楚如何让Mustache只渲染3个物体。我已经做了很多搜索，但我似乎无法找到语法。

还没有与'load-more'按钮关联的代码。我想我会从拼图的第一部分开始。

或者，对于这种布局，是否有比胡子更好的解决方案？

这是我到目前为止所做的：

<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个元素是您要呈现的内容，那么整个数组不您的视图模型，您应该不通过它留给小胡子。

可以将函数传递给Mustache，但它不是＆＃34; Mustache Way＆＃34;

胡子模板中的逻辑越少，它们的可调试性和可维护性就越强。这是使用Mustache进行模板化的重点。他们应该按原样接受你的视图模型并使用它，而不是对它应用逻辑并尝试操纵它。

让我们说你有你的

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

然后将其传递给Mustache

Mustache.js - 仅渲染有限数量的数组对象

1 个答案: