2016-07-20 31 views
1

Ich bin neu zu lesen Backbone js und ich habe einige ernste Probleme mit Argumente in Backbone js übergeben.Backbone js Argumente übergeben

var Song = Backbone.Model.extend(); 
var Songs = Backbone.Collection.extend({ 
    model: Song 
}); 
var SongView = Backbone.View.extend({ 
    el: "li", 
    render: function() { 
    this.$el.html(this.model.get("title")); 
    return this; 
    } 
}); 
var SongsView = Backbone.View.extend({ 
    el: "ul", 
    initialize: function() { 
    this.model.on("add", this.onSongAdded, this); 
    }, 
    onSongAdded: function(song) { // when object is added to a collection add event is triggerd 
    // the handler for this event get an argument which is the object that was just added 
    //in this case it refers to a song model so we simply pass it to our songView which is responsible for rendering a song an then we use jquery append method 
    // to append it to our list 
    var songView = new SongView({ 
     model: Song 
    }); 
    this.$el.append(songView.render().$el); 

    }, 
    render: function() { 
    var self = this; 
    this.model.each(function(song) { // 
     var songView = new SongView({ 
     model: Song 
     }); 
     self.$el.append(songView.render().$el); 
    }); 
    } 
}); 
var songs = new Songs([ 
    new Song({ 
    title: "1" 
    }), 
    new Song({ 
    title: "2" 
    }), 
    new Song({ 
    title: "3" 
    }) 
]); 
var song_1 = new Song({ 
    title: "hello" 
}); 
var songsView = new SongsView({ 
    el: "#songs", 
    model: Songs 
}); 
songsView.render(); 

wie Sie habe ich diese Funktion sehen: onSongAdded wir haben einige Ereignisse in-built wie hinzufügen, dass drei Argumente wie diese: add (Sammlung, Modell, Optionen) Wie kann ich Verwenden Sie diese Argumente in meinem Code? kannst du mir helfen?

Antwort

0

Die Option el zeigt die Ansicht auf ein Element an, das bereits in DOM vorhanden ist. Ihre Artikelansichten sollten neue <li> Elemente erstellen, sodass Sie stattdessen die Option tagName verwenden sollten.

In Ihrer Sammlung Ansicht Konstruktor haben Sie el Option definiert und Sie übergeben eine andere el Option bei der Instanziierung. Wenn #songs in DOM ein <uL> ist, dann keine Verwendung bei der Definition el: "ul", im Konstruktor.

Es ist auch nicht notwendig, Modelle manuell zu instanziieren, Sie können Objekte einfach in Sammlungen übergeben, und die Sammlung führt dies intern durch. Und übergeben Sie die Sammlung nicht als model, übergeben Sie sie als collection.

+0

danke viel lieber! –