Mit Handlebars.js, wie kann ich füllen einer select-box mit globalen Kontext-Daten, sondern stellen Sie das ausgewählte Element mit Daten aus der aktuellen loop-Punkt?

Gegeben, die folgende 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...
    ]
}

Und die folgende Vorlage 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>

Wie kann ich die select Boxen, die mit der gemeinsamen Farbe/Größe-Daten von den globalen Kontext, aber für jede Zeile in der Tabelle legen Sie die selected="selected" - Attribut auf die Optionen, die Werte passend zu den aktuellen Produkt-Farbe/- Größe ID?

So wie es da steht, innerhalb der Schleife gibt es keinen Zugriff auf die Colours oder Sizes arrays, so wählt die leer sind. Ich habe versucht, mit einer globalen Helfer explizit übergeben Sie in jedem Produkt aus dem globalen Kontext vor dem Rendern, etwa so:

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('');
});

Und 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>

Das funktioniert, aber es scheint sehr klobig, und ich habe immer noch keine Ahnung, wie die selected Attribute für jedes Produkt in Farbe/Größe wählen.

Kann jemand mir helfen? Ich habe die Kontrolle über den code, der erzeugt JSON, so dass die JSON-Struktur kann bei Bedarf geändert werden.