7

私は html テンプレートにHandlebarsJSを使用しています (または少なくとも使用を開始しています)が、行き止まりになっている可能性があります。私が欲しいのは、関数をテンプレートに渡すことです。

<div id="divTemplate">
  <span onclick="{{func}}">{{text}}</span>
</div>

そして、私は次のようなものを期待します

var source = $('#divTemplate').html();
var template = Handlebars.compile(source);

var data = {
  "text": "Click here",
  "func": function(){
    alert("Clicked");
  }
};

$('body').append(template(data));

ただし、関数は init で実行され、テンプレートに渡されず、結果は次のようになります。

<span onclick="">Click here</span>.

ヘルパー関数でもいくつか試してみましたが、うまくいきませんでした。どんなアイデアでも大歓迎です。:)

4

2 に答える 2

17

解決策は非常に簡単です。

ハンドルバーは、テンプレートに渡すオブジェクトのプロパティを出力します。プロパティが関数の場合、関数を実行して戻り値を出力します

あなたの例では、関数は値を返さないため (アラートを呼び出すだけです)、出力は空です。

次のようなヘルパー メソッドを作成できます。

handlebars.registerHelper('stringifyFunc', function(fn) {
    return new Handlebars.SafeString("(" + 
               fn.toString().replace(/\"/g,"'") + ")()");
});

次に、テンプレート内から、文字列化する必要がある関数でそれを使用する必要があります。

<div id="divTemplate">
  <span onclick="{{stringifyFunc func}}">{{text}}</span>
</div>
于 2012-09-19T13:38:03.787 に答える