在Spine.js中传递this.item时,把手会断裂

Question

我正在尝试实现Spine.js文档中给出的Todo示例,这里给出了:http://spinejs.com/docs/example_tasks

只有我想使用Handlebars而不是jQuery.tmpl.我正在使用Handlebars 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"}]"

有任何想法吗？

Answer 1

问题似乎是：

1. ID 不匹配 - 您的模板 ID 是history-template，但您尝试将其选择为$("#my-template)。
2. 您的数据应该像{"data":"hello","id":"c-0"}（对象）一样编写，没有方括号（这使其成为数组）。

一旦我做了这两个更正，我就可以运行你的代码。 请参阅此处的工作演示。

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

（另请参阅此处以确认 #if 逻辑是否正常工作。）

编辑

要以数组形式使用数据——{ data: "hello", id: "c-0" }据我所知，为了在 Handlebars 模板中使用它，您需要将其包装在一个对象中：

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}}

这是更新的 Fiddle。