2

次の JSON が与えられます。

{
    "Colours": [
        { "ColourID": 1, "Name": "Red" },
        { "ColourID": 2, "Name": "Yellow" },
        { "ColourID": 3, "Name": "Blue" }
    ],
    "Sizes": [
        { "SizeID": 1, "Name": "Small" },
        { "SizeID": 2, "Name": "Medium" },
        { "SizeID": 3, "Name": "Large" }
    ],
    "Products": [
        { "ColourID": 1, "SizeID": 1, "Name": "Red Small" },
        { "ColourID": 1, "SizeID": 2, "Name": "Red Medium" },
        { "ColourID": 1, "SizeID": 3, "Name": "Red Large" },
        // and so on...
    ]
}

そして、次のテンプレート HTML:

<table>
    {{#Products}}
    <tr>
        <td>
            <input type="text" value="{{Name}}">
        </td>
        <td>
            <select>
                {{#Colours}}
                <option value="{{ColourID}}">{{Name}}</option>
                {{/Colours}}
            </select>
        </td>
        <td>
            <select>
                {{#Sizes}}
                <option value="{{SizeID}}">{{Name}}</option>
                {{/Sizes}}
            </select>
        </td>
    </tr>
    {{/Products}}
</table>

selectグローバル コンテキストから共通の色/サイズ データを使用してボックスを作成するにはどうすればよいですか?ただし、各テーブル行selected="selected"について、現在の製品の色/サイズ ID と一致する値を持つオプションの属性を設定しますか?

現状では、ループ内ではColoursまたはSizes配列へのアクセスがないため、選択は空白です。次のように、グローバル ヘルパーを使用して、レンダリングする前にグローバル コンテキストから各製品に明示的に渡すことを試みました。

Handlebars.registerHelper('productloop', function(context, options) {
    var ret = [];

    for(var i=0, j=context.Products.length; i<j; i++) {
        var option = context.Products[i];

        option.Colours = context.Colours;
        option.Sizes = context.Sizes;

        ret.push(options.fn(option));
    }

    return ret.join('');
});

そしてHTML：

<table>
    {{#productloop}}
    <tr>
        <td>
            <input type="text" value="{{Name}}">
        </td>
        <td>
            <select>
                {{#Colours}}
                <option value="{{ColourID}}">{{Name}}</option>
                {{/Colours}}
            </select>
        </td>
        <td>
            <select>
                {{#Sizes}}
                <option value="{{SizeID}}">{{Name}}</option>
                {{/Sizes}}
            </select>
        </td>
    </tr>
    {{/productloop}}
</table>

selectedこれは機能しますが、非常に不格好に思えます。また、各製品の色/サイズ選択の属性を設定する方法がまだわかりません.

誰でも私を助けることができますか？JSON を生成するコードを制御できるので、必要に応じて JSON 構造を変更できます。

4

2 に答える 2

5

../名前空間で 1 レベル上げるために使用できます。

<select>
    {{#each ../Colours}}
    <option value="{{ColourID}}">{{Name}}</option>
    {{/each}}
</select>

{{#each}}を扱うときに読みやすくなったので、に切り替えました../。

デモ: http://jsfiddle.net/ambiguous/pFpS4/

于 2013-08-30T05:36:52.497 に答える
2

選択したプロパティを現在の製品のハンドルバー テンプレートに追加します。例えば。ブルー、スモール、レッドミディアム...

{
    Colours: [
        { "ColourID": 1, "Name": "Red" },
        { "ColourID": 2, "Name": "Yellow" },
        { "ColourID": 3, "Name": "Blue", "selected" : "selected"  }
    ],
    Sizes: [
        { "SizeID": 1, "Name": "Small" , "selected" : "selected" },
        { "SizeID": 2, "Name": "Medium" },
        { "SizeID": 3, "Name": "Large" }
    ],
    Products: [
        { "ColourID": 1, "SizeID": 1, "Name": "Red Small" },
        { "ColourID": 1, "SizeID": 2, "Name": "Red Medium", "selected" : "selected" },
        { "ColourID": 1, "SizeID": 3, "Name": "Red Large" },
        // and so on...
    ]
}

そして、次のようにテンプレート内で使用します。

<table>
    {{#Products}}
    <tr>
        <td>
            <input type="text" value="{{Name}}">
        </td>
        <td>
            <select>
                {{#Colours}}
                <option value="{{ColourID}}" {{selected}}>{{Name}}</option>
                {{/Colours}}
            </select>
        </td>
        <td>
            <select>
                {{#Sizes}}
                <option value="{{SizeID}}"  {{selected}}>{{Name}}</option>
                {{/Sizes}}
            </select>
        </td>
    </tr>
    {{/Products}}
</table>
于 2013-08-29T11:43:16.583 に答える