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}} を表示したいだけです。

すなわち

カテゴリー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

これは実行可能ですか？

ありがとう、スコット

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 に答える