7

ハンドルバーテンプレートで最初のラジオボタンをチェックする簡単で明確な方法を取得するにはどうすればよいですか。tks

レンプレート：

<form>
    {{#each this}}
        <input value="{{value}}" />
     {{/each}}
</form>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

レンダリングを期待する：

<form>
    <input value="val 1" checked />
    <input value="val 2" />
    <input value="val 3" />
</form>

皆さんありがとう。

4

2 に答える 2

10

{{#each}}ハンドルバーでは、反復回数などにアクセスできないため、テンプレートとデータを少し変更せずにアクセスすることはできません。

<form>
    {{#each this}}
        <input type="radio" value="{{value}}" {{#if sel}}checked="checked"{{/if}} />
    {{/each}}
</form>

次に、データに値を追加selします。

var tmpl = Handlebars.compile($('#t').html());
var html = tmpl([
    { value: 'val 1', sel: true  },
    { value: 'val 2', sel: false },
    { value: 'val 3', sel: false }
]);

デモ： http： //jsfiddle.net/ambiguous/27Ywu/

sel: trueもちろん、データ配列の最初の要素に設定することもできます。

data = [ ... ];
data[0].sel = true;
var html = tmpl(data);

デモ： http： //jsfiddle.net/ambiguous/yA5WL/

または、jQueryを使用して、HTMLを取得した後の最初のクエリを確認します。

// Add the HTML to the DOM...
$('form input:first').prop('checked', true); // Or whatever selector matches your HTML

デモ： http： //jsfiddle.net/ambiguous/sPV9D/

新しいバージョンのハンドルバーでは、インデックスにアクセスできます。

の項目をループするeach場合、オプションで現在のループインデックスを参照できます。{{@index}}

{{#each array}}
  {{@index}}: {{this}}
{{/each}}

オブジェクトの反復には、{{@key}}代わりに次を使用します。

{{#each object}}
  {{@key}}: {{this}}
{{/each}}

したがって、最新のハンドルバーを使用している場合は、次の事実を使用して特別なことを行うことができます。

  1. 最初@indexはゼロになります。
  2. ブール値のコンテキストでは、ゼロは誤りです。

これにより、次のことが可能になります。

{{#each this}}
    <input type="radio" value="{{value}}" {{#unless @index}}checked="checked"{{/unless}} />
{{/each}}

デモ： http： //jsfiddle.net/ambiguous/PHKps/1/

もちろん、他のインデックスを選択するのは難しく、入力データを変更するか（以前のように）、ある種の{{#if_eq}}カスタムヘルパーを追加する必要があります。

于 2012-07-16T04:02:24.017 に答える
0

index2番目の引数として渡されます。

<form>
    {{#each people as |value index|}}
        <input value="{{value}}" type="radio" {{#unless index}}checked="checked"{{/unless}}/>
     {{/each}}
</form>
于 2017-01-26T01:59:24.450 に答える