Question

我正在尝试呈现以下列表：

    var servicesList1 = {
        services : [
            {title: "Service 1 Lorem", category: "Category 1", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 2 Lorem", category: "Category 1", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 3 Lorem", category: "Category 1", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 4 Lorem", category: "Category 1", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 5 Lorem", category: "Category 2", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 6 Lorem", category: "Category 2", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 7 Lorem", category: "Category 2", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 8 Lorem", category: "Category 2", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."}
        ]
    };

使用以下模板：

{{#services}}
<h3>{{category}}</h3>
<article>
    <section class="service-image {{imageClass}}"></section>
    <h4>{{title}}</h4>
    <p>{{description}}</p>
</article>
{{/services}}

但我只希望{{category}}显示值何时更改。

即。

第1类

Title 1
Description 1

Title 2
Description 2

Title 3
Description 3

第2类

Title 4
Description 4

Title 5
Description 5

Title 6
Description 6

这可行吗？

谢谢，斯科特

Answer 1

您需要稍微重组servicesList1。如果您想按类别组织模板，则必须以相同的方式构建数据。

var servicesList1 = {
    categories : [
        {
            name: "Category 1",
            services: [
                {title: "Service 1 Lorem", category: "Category 1", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
                {title: "Service 2 Lorem", category: "Category 1", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            ]
        },
        {
            name: "Category 2",
            services: [
                {title: "Service 3 Lorem", category: "Category 2", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
                {title: "Service 4 Lorem", category: "Category 2", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            ]
        }
    ]
};

模板就是这样的。

{{#categories}}
    <h3>{{name}}</h3>
    {{#services}}
        <article>
            <section class="service-image {{imageClass}}"></section>
            <h4>{{title}}</h4>
            <p>{{description}}</p>
        </article>
    {{/services}}
{{/categories}}

您可以像我一样将category属性保留在每个服务对象中，也可以将其取出。如果你使用的是不是JavaScript的Mustache实现，我会留下它。例如，Coldfusion实现无法遍历链。所以，如果你需要显示每个服务的类别我会留下它，如果不是我会把它拿出来。

Answer 2

如果将对象更改为：

，则可以执行此操作

var servicesList1 = {
    categories:[
        {name: "Category 1", services:[
            {title: "Service 1 Lorem", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 2 Lorem", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 3 Lorem", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 4 Lorem", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
        ]},
        {name: "Category 2", services:[
            {title: "Service 5 Lorem", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 6 Lorem", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 7 Lorem", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 8 Lorem", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."}
        ]}
    ]
};

，您的模板可能如下所示：

{{#categories}}
    <h3>{{name}}</h3>
    {{#services}}
        <article>
            <section class="service-image {{imageClass}}"></section>
            <h4>{{title}}</h4>
            <p>{{description}}</p>
        </article>
    {{/services}}
{{/categories}}

这应该完成工作;但如果你不能改变我建议运行javascript函数的对象。

带有分组类别的小胡子模板

2 个答案: