流星中的預選選項

Question

試圖實現一個彈出窗口，允許您修改現有的數據庫記錄。作爲這個的一部分，我有幾個選擇框，我需要預先填充現有的選擇。我首先想到的似乎很難做到。這裏是什麼，我有我的模板

{{#with myExistingRecord}} 
    <select class="myselect"> 
     {{#each hoursInTheDay}} 
      {{#if isSelectedHour}} 
       <option selected>{{this}}</option> 
      {{else}} 
       <option>{{this}}</option> 
      {{/if}} 
     {{/each}} 
    </select> 
{{/with}} 

我碰上在isSelectedHour模板函數問題的一個片段，因爲this不能有兩個定義（第一個是#each值，第二個是記錄對象）。我需要將#each循環中的值與我記錄中的值進行比較，我想不出一種優雅的方式來完成此操作。我總是可以將我的記錄值設置爲一個Session變量，但這很不方便。

有沒有一個很好的，不hacky的方式來做到這一點？

Answer 1

最後我決定創建一個簡單的Handlebars幫手來處理這個問題。如果有人想要做類似的東西，這裏的助手代碼：

Handlebars.registerHelper('hourOptions', function(selectedHour) { 
    var html = ''; 

    for (var hr = 0; hr < 24; hr++) { 
     if (hr === selectedHour) 
      html += '<option selected>' + hr + '</option>'; 
     else 
      html += '<option>' + hr + '</option>'; 
    } 

    return new Handlebars.SafeString(html); 
}); 

而且模板代碼變得

{{#with myExistingRecord}} 
    <select class="myselect"> 
     {{hourOptions mySelectedHour}} 
    </select> 
{{/with}} 

Answer 2

我有同樣的問題，並讓我吃驚的還有就是一個很好的方式。您可以訪問模板部分中的外部上下文，並且可以使用它將此值傳遞給輔助函數。我想如下重寫代碼：

<template name="myTemplate"> 
{{#with myExistingRecord}} 
    <select class="myselect"> 
     {{#each hoursInTheDay}} 
      <option {{selected ../recordHour}}>{{this}}</option> 
     {{/each}} 
    </select> 
{{/with}} 
</template> 

，然後有一個輔助函數：

Template.myTemplate.selected = function(hour) { 
    if (hour == currentHour) 
     { return "selected ";} 
    else 
     { return "";} 
}; 

查找here有關../符號是如何工作的細節。