0

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

    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}} 显示值何时发生变化。

IE

第一类

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

这是可行的吗？

谢谢，斯科特

4

2 回答 2

0

您将不得不进行一些重组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 实现在向后遍历链时遇到了麻烦。因此，如果您需要显示每项服务的类别，我会将其保留，否则我会将其取出。

于 2012-07-18T14:48:27.123 回答
0

如果您将对象更改为以下内容，则可以这样做：

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函数的对象。

于 2012-07-18T14:57:24.403 回答