javascript - 在 Spine.js 中传递 this.item 时 Handlebars 断裂

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

Handlebars 在 this.template(this.item) 处抛出异常:

Uncaught TypeError: Cannot call method 'match' of undefined

在 Handlebars 词法分析器中，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"}(一个对象)，没有方括号(这使它成为一个数组).

一旦我进行了这两项更正，我就可以运行您的代码。 See here for a working demo.

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

(另请参阅 here 确认 #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}}

Here's the updated Fiddle.