使用Handlebars.js，如何使用全局上下文數據填充選擇框，但是使用當前循環項目中的數據設置選定項目？

鑑於以下JSON：使用Handlebars.js，如何使用全局上下文數據填充選擇框，但是使用當前循環項目中的數據設置選定項目？

{ 
    "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箱，但每個錶行在值與當前產品的顏色/尺寸ID匹配的選項上設置selected="selected"屬性？

就目前而言，在循環內不能訪問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結構。

來源

2013-08-29 Mark Bell

爲什麼不是你的JSON周圍有屬性名稱雙引號？ –

因爲它是通過我使用的Chrome擴展程序進行格式化的，我只是將其複製並粘貼。現在修復。 –

在您的手柄模板中爲當前產品添加所選屬性。例如，對於藍色，小紅色，中等...

{ 
    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-29 11:43:16 Vishwanath

不，這將不起作用 - 選定的值對於每一行都會（至少可能）不同，所以我無法在全局數組上設置選定的屬性。 –

您可以使用../在命名空間加緊一層：

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

我也切換到{{#each}}，因爲我覺得它更具可讀性與../打交道時。

演示：http://jsfiddle.net/ambiguous/pFpS4/

來源

2013-08-30 05:36:52

使用Handlebars.js，如何使用全局上下文數據填充選擇框，但是使用當前循環項目中的數據設置選定項目？

回答

相關問題