2016-07-20 5 views
1

私はバックボーンjsを読んで初めてで、に重大な問題があります。引数はバックボーンjsです。バックボーンjs引数を渡す

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(); 

あなたは、私がこの機能を持って見ることができるように:私はどうすればよい アドオン(コレクション、モデル、オプション):は、私たちがこのような3つの引数を取得するなどの追加など、いくつかの組み込みのイベントがある をonSongAdded私のコードでこれらの引数を使用しますか? 私を助けることができますか?

答えて

0

elオプションは、ビューをDOM内に既に存在する要素に向けます。アイテムビューでは新しい<li>要素を作成する必要がありますので、代わりにtagNameオプションを使用する必要があります。

コレクションビューのコンストラクタでは、elオプションを定義しており、別のelオプションをインスタンス化しながら渡しています。 DOMの#songs<uL>の場合は、コンストラクタでel: "ul",を定義する際に使用しません。

また、モデルを手動でインスタンス化する必要はありません。オブジェクトをコレクションに渡すだけでコレクションが内部的に行います。コレクションをmodelとして渡さないでください。collectionとして渡してください。

+0

本当にありがとうございました! –