ハンドルバーは2つの異なるプロパティセットを持ちます。ヘルパーか部分？

Question

私はjsonオブジェクトを持っています。チームとteamDataを呼びましょう。

私は、プライマリとして変数またはコールにセカンダリを渡すと、それは選択されたTeamTypeの状態でドロップダウンの状態をレンダリング持つことができるようにしたいです。

私は多くのハンドルのチュートリアルを読んできたが、それらのどれも実際にオブジェクトの複数のプロパティに対処したり、別のプロパティから値をリンクする方法を示しています。

状態のドロップダウンが

<script type="text/x-handlebars-template" id="tmpl-states"> 
     <select> 
      {{#eachProperty States}} 
       <option name="{{property}}">{{value}}</option> 
      {{/eachProperty}} 
     </select> 
</script> 

Handlebars.registerHelper('eachProperty', function (context, options) { 
    var ret = ""; 
    for (var prop in context) { 
      ret = ret + options.fn({ property: prop, value: context[prop] }); 
    } 
    return ret; 
}); 

シンプルですが、私がやりたいことより（須藤中）

renderTemplate("tmps-all", "container", "data", "variable"); 

<script type="text/x-handlebars-template" id="tmps-all"> 
     {{#each Teams}} 
      {{#if TeamType == variable}} // e.g. Primary 
       var State = this.State; 
      {{/if}} 
     {{/each}} 
     <select> 
      {{#eachProperty States}} 
       {{#if property == State}} // e.g NY 
       <option name="{{property}}" selected>{{value}}</option> 
       {{/else}} 
       <option name="{{property}}">{{value}}</option> 
       {{/if}} 
      {{/eachProperty}} 
     </select> 
</script> 

var teamData = {"Teams":[{"TeamType":"Primary","State":"NY"},{"TeamType":"Secondary","State":"CA"}],"States":{"AK":"Alaska","AL":"Alabama","AR":"Arkansas","AZ":"Arizona","CA":"California","CO":"Colorado","CT":"Connecticut","DC":"District of Columbia","DE":"Delaware","FL":"Florida","GA":"Georgia","HI":"Hawaii","IA":"Iowa","ID":"Idaho","IL":"Illinois","IN":"Indiana","KS":"Kansas","KY":"Kentucky","LA":"Louisiana","MA":"Massachusetts","MD":"Maryland","ME":"Maine","MI":"Michigan","MN":"Minnesota","MO":"Missouri","MS":"Mississippi","MT":"Montana","NC":"North Carolina","ND":"North Dakota","NE":"Nebraska","NH":"New Hampshire","NJ":"New Jersey","NM":"New Mexico","NV":"Nevada","NY":"New York","OH":"Ohio","OK":"Oklahoma","OR":"Oregon","PA":"Pennsylvania","PR":"Puerto Rico","RI":"Rhode Island","SC":"South Carolina","SD":"South Dakota","TN":"Tennessee","TX":"Texas","UT":"Utah","VA":"Virginia","VT":"Vermont","WA":"Washington","WI":"Wisconsin","WV":"West Virginia","WY":"Wyoming"}};

Answer 1

等の必要はありませんあなたのeachPropertyヘルパーそれがあなたに与えている機能は既にHandlebarsに存在しています。のは、そのヘルパーを削除し、次のように私たちのテンプレートに更新してみましょう（注：私はvalueでname属性を置き換えます）：

<select> 
    {{#each States}} 
     <option value="{{@key}}">{{this}}</option> 
    {{/each}} 
</select> 

を今に起因selectedを設定するタスクに。

あなたのテンプレートにあまりにも多くのロジックをしようとしています。テンプレートが変数を初期化するのではありません。その作業はの前に行われ、の前にテンプレートがレンダリングされます。私たちのコードではテンプレートメソッドを呼び出すことで、テンプレートに必要なすべてのデータを渡します。これは、このように私たちのテンプレートにデータ構造を渡すことを意味します：

[ 
    { 
     value: 'AK', 
     label: 'Alaska', 
     selected: false 
    }, 
    { 
     value: 'AL', 
     label: 'Alabama', 
     selected: false 
    }, 
    // and so on... 
] 

私たちのコードは、このデータ構造を構築する作業を行います。

var selected_team = teamData.Teams.find(team => team.TeamType === 'Primary'); 
var states = Object.keys(teamData.States).map(key => ({ 
    value: key, 
    label: teamData.States[key], 
    selected: (key === selected_team.State) 
})); 

今、私たちは、新しいデータを処理するために、当社のテンプレートを変更することができます構造：私たちは、テンプレートを呼び出すと

<select> 
    {{#each this}} 
     <option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option> 
    {{/each}} 
</select> 

、我々は単に私たちのstates変数を渡す：

renderTemplate(states); 

ただし、 これらのすべてが私たちの後ろにありますが、私はこのテンプレートを変更した選択されたオプションを反映させるだけの目的を持っていないことを付け加えたいと思います。 DOMを使用して変更を加えることは、私にとってより意味があります。次のようなもので十分でしょう：

document.querySelector('#Select [value="NY"]').selected = true; 

参照してください：https://stackoverflow.com/a/7373115/3397771