tay lái phá vỡ khi đi qua this.item trong Spine.js

Question

Tôi đang cố gắng để thực hiện các Todo-ví dụ được đưa ra trong các tài liệu Spine.js, đưa ra ở đây: http://spinejs.com/docs/example_tasks

duy nhất tôi muốn sử dụng tay lái thay vì jQuery.tmpl. Tôi đang sử dụng tay lái 1.0.rc.1

Tuy nhiên, khi tôi cố gắng để gọi:

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

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

tay lái ném một ngoại lệ tại this.template(this.item):

Uncaught TypeError: Cannot call method 'match' of undefined 

Trong lexer tay lái, this._input là quay trở lại như không xác định.

mẫu của tôi là như sau:

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

dữ liệu:

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

Bất kỳ ý tưởng?

Answer 1

Vấn đề dường như là:

1. sự không phù hợp trong các ID - mẫu ID của bạn là history-template, nhưng bạn đang cố gắng để chọn nó như $("#my-template).
2. Dữ liệu của bạn phải được viết như {"data":"hello","id":"c-0"} (một đối tượng), không có dấu ngoặc vuông (làm cho nó thành mảng).

Tôi có thể chạy mã của bạn khi tôi thực hiện hai lần chỉnh sửa đó. See here for a working demo.

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

(Xem thêm here cho một xác nhận rằng logiC# nếu đang làm việc một cách chính xác.)

---

Sửa

Để sử dụng các dữ liệu trong các hình thức mảng - { data: "hello", id: "c-0" } - theo như tôi có thể nói, để sử dụng nó trong một mẫu Handlebars, bạn cần bọc nó trong một đối tượng:

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

Bằng cách đó bạn có thể sử dụng hình thức lặp tay lái {{#each items}}:

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

Here's the updated Fiddle.

Answer 2

Bạn đang đi qua trong các dữ liệu không chính xác.

According to the offical handlebars documentation dữ liệu được cung cấp để truyền cho tay lái làm đối tượng.Ví dụ:

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

Với một mẫu của:

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

sẽ được render thành

<div>bar</div> 
<div>faz</div>