22

Ok ragazzi così ho questo array di valori coppia chiave che sto usando come il mio modello:
loop in modello di sottolineatura js

var acs = [{'label':'input box'},{'label':'text area'}]; 

il resto del codice è la seguente

var Action = Backbone.Model.extend({}); 
var action = new Action(acs); 
var ActionView = Backbone.View.extend({ 
    tagName:"li", 
    template: _.template($('#actions-template').html()), 
    events:{ 
     "click":"makeInput" 
    }, 
    render:function(){ 
     $(this.el).html(this.template(this.model.toJSON())); 
     $(".hero-unit>ul").append(this.el); 
     return this; 
    }, 
    makeInput:function(){ 
     alert("im in"); 
    } 
}); 
var actionView = new ActionView({model:action}); 
actionView.render(); 

La domanda riguarda la vista. Come posso ciclo attraverso il modello che sto passando, se questa è la vista che voglio avere

<script type="text/template" id="actions-template"> 
<% _.each(action, function(acs) { %> 
    <a class="btn"><%= label %></a> 
<% }); %> 
</script> 

C'è qualcosa di sbagliato con il mio punto di vista e il ciclo credo. Qualche indizio? Grazie!

+0

http://stackoverflow.com/questions/4778881/how-to-use-underscore-js-as-a-template-engine ha anche alcune soluzioni. – Pramod

risposta

28

Si sarebbe probabilmente vuole fare due cose:

  1. regolare i dati da Lei forniti al modello:

    $(this.el).html(this.template({ 
        action: this.model.toJSON() 
    })); 
    
  2. Regolare la parte interna del modello da utilizzare al posto di acs.labellabel:

    <a class="btn"><%= acs.label %></a> 
    

Demo: http://jsfiddle.net/ambiguous/xczBy/

Ripensandoci, penso che dovresti lavorare con una raccolta piuttosto che con un singolo modello. Che ci si vuole aggiungere questo:

var ActionCollection = Backbone.Collection.extend({ 
    model: Action 
}); 

e quindi regolare render utilizzare this.collection:

$(this.el).html(this.template({ 
     actions: this.collection.toJSON() 
    })); 

E poi iniziare le cose in questo modo:

var actions = new ActionCollection(acs); 
var actionView = new ActionView({collection: actions}); 

E, infine, fare riferimento a actions nel modello:

<% _.each(actions, function(acs) { %> 

Demo: http://jsfiddle.net/ambiguous/6VeXk/

Questo sarebbe meglio abbinare i modelli basati chiave/valore di Backbone.

+0

sì! grazie mille – climboid

+0

però una piccola domanda, perché è azione: this.model.toJSON()? – climboid

+1

@climboid: il tuo modello era un array (che è strano in Backbone) e devi dargli un nome di qualche tipo o il modello non sarà in grado di riferirsi ad esso. I modelli sono normalmente insiemi di coppie chiave/valore (più o meno) in modo che i valori ottengano i nomi per impostazione predefinita. Passare a una raccolta (come nella mia risposta aggiornata) avrebbe più senso. –