具有分組類別的小胡子模板

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函數。