1

次のハンドルバー テンプレートを作成しました

<script type="text/template" id="status">
{{#completed status}}
     <button class="btn btn-inverse">Close</button>
     <button class="btn btn-primary">Submit</button>
     <button class="btn btn-danger">Delete</button>
{{else}}
     <button class="btn btn-primary">Close</button>
{{/completed}}
</script>

これが私のハンドルバー登録ヘルパーです

Handlebars.registerHelper('completed',function(item,options){
if (item == 'INITIATED'){
    console.log(options.fn())
    return options.fn();        
}
else{
    console.log(options.inverse());
    return options.inverse();
} 
});

そして私のjavascript

obj={status: 'INITIATED'} and obj={status:'RECEIVED'}
Handlebars.compile( $('#status').html() )(obj).appendTo('body')

テンプレート内のstatus変数は、値INITIATEDまたはRECEIVED/COMPLETED

コンソールで印刷すると、例外のボタン (1 回、3 つのボタン、次回は 1 つのボタン) が表示されますが、html ファイルではelse section唯一の (両方の場合) が表示されます。

どこで間違ったのかわかりません。ご意見をお聞かせください。

4

1 に答える 1

1

テンプレートとヘルパーは問題ありません。あなたがそれらを使用している方法：

Handlebars.compile( $('#status').html() )(obj).appendTo('body')

意味がありません。Handlebars.compile関数を返し、その関数を呼び出すと文字列が生成されます。つまり、appendTo実際には次のようになります。

var tmpl = Handlebars.compile($('#status').html());  // Okay
var html = tmpl(obj);                                // Okay
html.appendTo('body');                               // Broken.

appendTo文字列にはメソッドがありません。$()文字列を a で囲むことができます。

$(
    Handlebars.compile($('#status').html())(obj)
).appendTo('body');

または、コードをより明確にするために段階的に実行します。

var tmpl = Handlebars.compile($('#status').html());
$('body').append(tmpl(obj));

デモ: http://jsfiddle.net/ambiguous/46sfd/

于 2013-03-03T18:47:35.503 に答える