Mustache.js-仅渲染有限数量的数组对象 [英] Mustache.js - Rendering only a limited number of array objects

问题描述

我最近是从另一位开发人员那里继承下来的，而我遗留下来的东西让我很沮丧.

I recently inherited this from another developer, and what was left behind for me has me stumped.

我正在尝试建立一个设置，其中JSON数组中的前3个对象通过胡须呈现在页面上，然后单击一下，然后加载下3个，依此类推.我现在遇到的问题只是弄清楚如何使Mustache仅渲染3个对象.我已经做了很多搜索，但似乎找不到语法.

I am trying to build a set-up in which the first 3 objects in my JSON array are rendered on the page via mustache, then with a click, the next 3 load, and so forth. Where I'm stuck right now is just figuring out how to make Mustache only render 3 objects. I've done quite a bit of searching but I can't seem to find the syntax.

尚无与加载更多"按钮关联的代码.我想我将从难题的第一部分开始.

There is no code associated with the 'load-more' button yet. I figured I'd start with the first part of the puzzle.

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

Alternatively, is there a better solution than mustache for this kind of layout?

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

Here is what I have so far:

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

推荐答案

如果仅要显示数组的前3个元素，则整个数组不是您的视图模型 并且您应该不将其传递给胡须.

If only the first 3 elements of the array are what you're presenting, then the entire array is not your view-model and you should not pass it to mustache.

可以为此将一个函数传递给Mustache，但这不是胡须方式"

It is possible to pass a function to Mustache for this, but it is not the "Mustache Way"

您的胡须模板中的逻辑越少，它们的可调试性和可维护性就越强.这是使用Mustache进行模板制作的强项.他们应该按原样接受您的视图模型并使用它，而不是对其应用逻辑并尝试对其进行操作.

The less logic you have in your mustache templates, the more debug-able and maintainable they are. This is the strong point of using Mustache for templating. They should accept your view-model as is and work with that, rather than apply logic to it and try to manipulate it.

假设您拥有自己的

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

然后将其传递给Moustache

And pass that to Mustache instead

这篇关于Mustache.js-仅渲染有限数量的数组对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！