2016-05-17 12 views
0

Sagen wir, meine Vorlage wie folgt aussieht:Backbone - Holen Sie sich ein bestimmtes Modell aus einer Sammlung, die in einer Vorlage iteriert

<script type="text/template" id="template"> 
    {{#each []}} 
    <div>{{this.id}}</div> 
    <div>{{this.name}}</div> 
    <div>{{this.description}}</div> 
    <input id="my-btn" type="button">Button</input> 
    {{/each}} 
</script> 

Das Modell und die Sammlung:

var Item = Backbone.Model.extend({ 
    defaults: { 
     id: null, 
     name: '', 
     description: '' 
    } 
}); 

var ItemCollection = Backbone.Collection.extend({ 
    model: Item, 
    url: function() { 
     return '/items'; 
    } 
}); 

Und im Blick Ich hole einfach die Artikel und zeige sie an:

var ItemsView = Backbone.View.extend({ 
    el: $('#items'), 
    template: Handlebars.compile($('#template').html()), 
    items: new ItemCollection(), 
    initialize: function() { 
     var self = this; 
     this.items.fetch({success: function() { 
      self.render(); 
     }}); 
    }, 
    render: function() { 
     var items = new ItemCollection(); 
     var html = this.template(items.toJSON()); 
     this.$el.html(html); 
    } 
}); 

Jedes Element mit seinen Feldern in der Vorlage hat eine eigene Schaltfläche.

Im Moment muss ich eine Funktionalität hinzufügen, die ausgelöst wird, wenn die Schaltfläche in der Vorlage gedrückt wird, also beim Klicken auf eine Funktion muss das Element, das mit der Schaltfläche in der Vorlage verknüpft ist.

Wie kann ich das tun?

+1

'id' Attribute müssen eindeutig sein, oder Sie haben keine Gültigkeit HTML. Fix das zuerst und dann etwas Zeit mit dem [feinen Handbuch] (http://backbonejs.org/#View-events). –

+0

Mögliches Duplikat von [Modell anklicken und zu einer anderen Sammlung im Backbone hinzufügen] (http://stackoverflow.com/questions/9885341/get-clicked-model-and-add-to-other-collection-in-backbone) –

Antwort

1

Hier ist eine Möglichkeit, um das zu erreichen, was Sie fordern - fügen Sie einfach einen Klick-Handler zum events Hash (http://backbonejs.org/#View-events) hinzu. Ich habe den Schaltflächen Daten-Dash-Attribute hinzugefügt, so dass Sie im Click-Handler bestimmen können, auf welche Schaltfläche geklickt wurde/welches Modell angewendet werden soll.

var ItemView = window.Backbone.View.extend({ 
    tagName: 'div', 
    template: Handlebars.compile($('#template').html()), 
    events: { 
      'click .item-btn': 'clickHandler' 
    }, 
    render: function() { 
     this.$el.html(this.template({ 
     items: collection.toJSON() 
     })); 
     return this; // backbone convention -- return the view 
    }, 
    clickHandler: function(e) { 
      alert($(e.target).data().itemId + ' clicked'); 
    } 
    }); 

Die obige Ansicht übernimmt die folgende Vorlage:

<script type="text/template" id="template"> 
     {{#each items}} 
     <div>{{this.id}}</div> 
     <div>{{this.name}}</div> 
     <div>{{this.description}}</div> 
     <input class="item-btn" data-item-id="{{this.id}}" type="button" value="Button {{this.id}}"></input> 
     {{/each}} 
    </script> 

Hier ist ein funktionierendes Demo: https://jsfiddle.net/9cgzcc3y/

Ein anderer Weg, dies zu tun (und eine, die ich persönlich bevorzugen) ist die Schaffung einer einzigen Ansicht für jedes Modell. Auf diese Weise wird jede Ansicht von einem individuellen Modell unterstützt.

var ItemView = window.Backbone.View.extend({ 
    tagName: 'div', 
    template: Handlebars.compile($('#template').html()), 
    events: { 
      'click .item-btn': 'clickHandler' 
    }, 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    }, 
    clickHandler: function() { 
     alert('clicked: ' + this.model.get('id')); 
    } 
    }); 

    var ItemsView = window.Backbone.View.extend({ 
    tagName: 'div', 
    initialize: function() { 
     this.collection = collection; 
    }, 
    render: function() { 
     var frag = document.createDocumentFragment(); 
     this.collection.each(function(model) { 
      frag.appendChild(new ItemView({model: model}).render().el); 
     }); 
     this.$el.append(frag); 
     return this; 
    } 
    }); 

    $('#items').append(new ItemsView().render().$el); 

Hier ist ein funktionierendes Demo dieser Alternative: https://jsfiddle.net/45kuhp7h/

+0

Danke, ich habe die erste Option benutzt und es hat funktioniert. –

Verwandte Themen