Ok les gars, j'ai donc ce tableau de valeurs de paires de clés que j'utilise comme modèle:
var acs = [{'label':'input box'},{'label':'text area'}];
le reste du code va comme suit
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 question concerne la vue. Comment puis-je parcourir le modèle que je passe si c'est la vue que je veux avoir
<script type="text/template" id="actions-template">
<% _.each(action, function(acs) { %>
<a class="btn"><%= label %></a>
<% }); %>
</script>
Il y a quelque chose qui ne va pas avec ma vue et la boucle je crois. Des indices? Merci!
Vous voudriez probablement faire deux choses:
Ajustez les données que vous fournissez au modèle:
$(this.el).html(this.template({
action: this.model.toJSON()
}));
Ajustez la partie intérieure du modèle pour utiliser acs.label
au lieu de label
:
<a class="btn"><%= acs.label %></a>
Démo: http://jsfiddle.net/ambiguous/xczBy/
Après réflexion, je pense que vous devriez travailler avec une collection plutôt qu'avec un seul modèle. Vous voudriez ajouter ceci:
var ActionCollection = Backbone.Collection.extend({
model: Action
});
Et puis ajustez render
pour utiliser this.collection
:
$(this.el).html(this.template({
actions: this.collection.toJSON()
}));
Et puis commencez les choses comme ceci:
var actions = new ActionCollection(acs);
var actionView = new ActionView({collection: actions});
Et enfin, reportez-vous à actions
dans le modèle:
<% _.each(actions, function(acs) { %>
Démo: http://jsfiddle.net/ambiguous/6VeXk/
Cela correspondrait mieux aux modèles de clé/valeur de Backbone.