8

我正在尝试实现 Spine.js 文档中给出的 Todo 示例，此处给出：http ://spinejs.com/docs/example_tasks

只有我想使用 Handlebars 而不是 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;
}

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

有任何想法吗？

4

2 回答 2

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

这是更新的小提琴。

于 2012-12-01T07:31:40.080 回答
0

您传递的数据不正确。

根据官方车把文档，数据应该作为对象传递给车把。例如：

{"foo":"bar","baz":"faz"}

使用以下模板：

<div>{{foo}}</div>
<div>{{baz}}</div>

将呈现为

<div>bar</div>
<div>faz</div>
于 2013-07-10T00:32:37.267 回答