Manubrio rompe quando passa this.item in Spine.js

Question

Sto cercando di implementare la Todo-esempio dato nella documentazione Spine.js, qui dato: http://spinejs.com/docs/example_tasks

solo mi piacerebbe utilizzare al posto del manubrio jQuery.tmpl. Sto usando Manubrio 1.0.rc.1

Tuttavia, quando tento di chiamare:

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

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

manubrio genera un'eccezione a this.template(this.item):

Uncaught TypeError: Cannot call method 'match' of undefined 

Nel lexer manubrio, this._input è tornando come non definito.

Il mio modello è la seguente:

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

dati:

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

Tutte le idee?

Answer 1

Il problema sembra essere:

1. una mancata corrispondenza tra gli ID - l'ID modello è history-template, ma si sta cercando di selezionarlo come $("#my-template).
2. I tuoi dati dovrebbero essere scritti come {"data":"hello","id":"c-0"} (un oggetto), senza le parentesi quadre (che ne fanno una matrice).

Posso eseguire il codice una volta apportate queste due correzioni. See here for a working demo.

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

(Vedi anche here per una conferma che la logica #if funziona correttamente.)

---

Modifica

Per utilizzare i dati in forma di matrice - { data: "hello", id: "c-0" } - per quanto posso dire, per utilizzarlo in un modello di Handlebars, è necessario avvolgerlo in un oggetto:

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

questo modo è possibile utilizzare il modulo di iterazione manubrio {{#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

Si passa nei dati in modo non corretto.

According to the offical handlebars documentation i dati devono essere passati al manubrio come oggetto.Per esempio:

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

con un modello di:

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

verrà reso come

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