8

ここにある Spine.js ドキュメントにある Todo-example を実装しようとしています: http://spinejs.com/docs/example_tasks

jQuery.tmpl の代わりにハンドルバーを使用したいだけです。ハンドルバー 1.0.rc.1 を使用しています

ただし、電話しようとすると：

template: Handlebars.compile($('#history-template').html()),

render: function(){
    var t = this.template(this.item);
    this.replace(t);
    return this;
}

ハンドルバーは次の場所で例外をスローしますthis.template(this.item):

Uncaught TypeError: Cannot call method 'match' of undefined

Handlebars lexer では、this._input未定義として戻ってきます。

私のテンプレートは次のとおりです。

<script id='history-template' type='text/x-handlebars-template'>
    <div class="content-inner {{#if viewed}}msg_unseen{{/if}}">                                             
        <div>{{data}}</div>
    </div>
</script>

データ：

"[{"data":"hello","id":"c-0"}]"

何か案は？

4

2 に答える 2

1

問題は次のようです。

  1. ID の不一致 - テンプレート ID はhistory-templateですが、として選択しようとしています$("#my-template)。
  2. データは{"data":"hello","id":"c-0"}(オブジェクトのように) 角かっこ (配列にする) なしで記述する必要があります。

これら 2 つの修正を行ったら、コードを実行できます。 実際のデモについては、こちらを参照してください。

var data = { data: "hello", id: "c-0" };
var template = Handlebars.compile($('#history-template').html());
var html = template(data);

( #if ロジックが正しく機能していることの確認については、こちらも参照してください。)

編集

配列形式でデータを使用するには -- { data: "hello", id: "c-0" }-- 私が知る限り、それをハンドルバー テンプレートで使用するには、オブジェクトでラップする必要があります。

var obj = { data: "hello", id: "c-0" };
var handlebarsData = { items: obj };

そうすれば、Handlebars 反復フォームを使用できます{{#each items}}。

{{#each items}}
    <div class="content-inner {{#if viewed}}msg_unseen{{/if}}">                                             
        <div>{{data}}</div>
    </div>
{{/each}}

これが更新されたフィドルです。

于 2012-12-01T07:31:40.080 に答える