1

我最近从另一个开发人员那里继承了这个，留下给我的东西让我很难过。

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

尚无与“加载更多”按钮相关的代码。我想我会从拼图的第一部分开始。

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

这是我到目前为止所拥有的：

<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>
4

1 回答 1

7

如果只有数组的前 3 个元素是您要呈现的，那么整个数组不是您的视图模型，您不应该将它传递给 mustache。

为此，可以将函数传递给 Mustache，但这不是“Mustache 方式”

胡须模板中的逻辑越少，它们的可调试性和可维护性就越高。这是使用 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

于 2013-05-07T21:08:56.630 回答