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 匹配的选项上设置属性？

就目前而言，在循环中无法访问ColoursorSizes数组，因此选择是空白的。我尝试使用全局帮助器在渲染之前将它们从全局上下文显式传递到每个产品中，如下所示：

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

您可以使用../在命名空间中提升一级：

<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 回答