web-dev-qa-db-fra.com

boucles dans le modèle js de soulignement

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!

22
climboid

Vous voudriez probablement faire deux choses:

  1. Ajustez les données que vous fournissez au modèle:

    $(this.el).html(this.template({
        action: this.model.toJSON()
    }));
    
  2. 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.

28
mu is too short