Warum erhalte ich alle Modelle des Benutzers auf Klick statt auf dem angeklickten Modell?

Question

Klicken Sie auf das eine Modell aus der Sammlung, um alle Modelle in der Konsole dieses Benutzers zu erhalten, anstatt das angeklickte. Kann mir jemand helfen?

App.js

in App.js in Modellen zu einer anderen Ansicht zu senden

var App = Backbone.View.extend({ 

    initialize: function() 
    { 
      this.collection = new Documents(); 
      console.log("this.collection init", this.collection); 
      this.listenTo(this.collection, 'add', this.render); 
      this.listenTo(this.collection, 'sync', this.renderSidebarModels); 
    }, 

    renderSidebarModels: function() 
    { 
      console.log("renderSidebarModels SYNC", this.collection); 

      for(var i=0; i<this.collection.length; i++) 
      { 
        console.log(this.collection.models); 
        this.sidebar = new SidebarView({model: this.collection.models[i]}); 
      }      
    }, 

    $(document).ready(function() { 
     console.log("ready!"); 
     var app = new App(); 
    }); 

SidebarView.js einen einzigartigen Blick für jedes Modell alle

in SidebarView.js im machen bekommen das Modell aus der Sammlung. Wenn ich auf die Schaltfläche mit der ID #titles klicke, werden alle Modelle dieses Benutzers und nicht nur das angeklickte Modell auf diesem Modell angezeigt.

var SidebarView = Backbone.View.extend({ 

     el : this.$("#sidebar"), 

     template: _.template(this.$('#sidebar-template').html()), 

     events: 
     { 
       "click #titles": "open", 
     }, 

     initialize: function() 
     { 
       console.log("sidebarView.initialize", this.model); 
       this.render(); 
     }, 

     render: function() 
     { 

       this.$el.append(this.template({ users: this.model })); 
       //console.log(this.model); 
       //return this; 
     }, 

     open: function(e) 
     { 
       console.log("open.sidebarView", this.model); 
     }, 

}) 

Answer 1

Ihr Ansatz ist nicht der sauberste Weg, um die Modellansicht zu initialisieren, da Sie nicht Initialisierung eine Ansicht pro Modell sind, aber die Art und Weisen Sie den Blick auf ein Modell zuzuordnen sind, ist die Sammlung von Modellen zu durchqueren und jedes Sammlungselement einer bestimmten Ansicht zuweisen. Dieser Ansatz ist umständlich, was zu einem Leistungseinbruch führt und auch dazu führt, dass viel zusätzlicher Code in Sichten geschrieben wird.

Der beste Ansatz ist, eine Ansicht pro Modell zu verwenden, was bedeutet, dass jedes Modell in unserer Sammlung ein eigenes Ansichtsobjekt hat, um die Daten dieses Modus zu rendern. Dies beseitigt jedoch nicht die Notwendigkeit, ein View-Objekt zu verwenden, das die Auflistung iteriert und die Liste füllt. Es verschiebt die Implementierung für jedes einzelne Modell nur auf eine Ansicht für dieses Modell. Bei diesem Ansatz hat jede Ansicht einen direkten Bezug zu ihrem Modell.

Etwas wie folgt aus:

var App = Backbone.View.extend({  

    initialize: function() { 
     this.collection = new Documents(); 
     console.log("this.collection init", this.collection); 
     this.listenTo(this.collection, 'add', this.render); 
     this.listenTo(this.collection, 'sync', this.renderSidebarModels); 
    }, 

    renderSidebarModels: function(item) { 
     this.collection.models.each(function(item) { 
      var sidebarView = new DealerView({      
       model : item 
      }, this); 

      sidebarView.render(); 
      _this.$el.append(sidebarView.$el); 
     }); 
    } 
}); 

Arbeiten mit dem Ansatz eine Möglichkeit, das angeklickt Element zu erhalten, ist das Datenattribut an seinem Platz zu verwenden:

open: function(e){ 
    e.preventDefault(); 
    var id = $(e.currentTarget).data("id"); 
    var item = this.collection.get(id); 
    console.log(item); 
}, 

aber wie gesagt ist diese Lösung nicht die Am besten sind wir gezwungen, das Modell anhand der ID des Modells nachzuschlagen.

diesen Artikel für ein besseres Verständnis lesen: https://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/