1

我目前正在通过截屏教程学习backbone.js，在此过程中，我的代码似乎停止工作，Cannot call method 'bind' of undefined在Chrome的javascript控制台中抛出错误。错误的行包含在initialize函数中：

window.PlaylistView = Backbone.View.extend({
    tag: 'section',
    className: 'playlist',

    initialize: function() {
        _.bindAll(this, 'render');
        this.template = _.template($('#playlist-template').html());
        this.collection.bind('reset', this.render);  //<<<<<< THIS LINE

        this.player = this.options.player;
        this.library = this.options.library;
    },

    render: function() {
        $(this.el).html(this.template(this.player.toJSON()));

        this.$('button.play').toggle(this.player.isStopped());
        this.$('button.pause').toggle(this.player.isPlaying());

        return this;
    }
});

我不知道是什么this.collection意思，为什么视图有一个集合，而不是模型的集合？this.collection.bind()在其他视图中使用似乎没有引发任何错误。在window.LibraryAlbumViewwhich callsthis.collection.trigger('select', this.model);和 extendswindow.AlbumView中，我没有看到在任何地方定义的任何集合window.AlbumView，但没有引发错误。这似乎让我感到困惑。

JSFIDDLE

编辑：

该错误已得到修复，因为而不是

window.Player = Backbone.Model.extend({
        defaults: {
            'currentAlbumIndex': 0,
            'currentTrackIndex': 0,
            'state': 'stop'
        },

        initialize: function() {
            this.playlist = new Playlist();
        },

我有

window.Player = Backbone.Model.extend({
        defaults: {
            'currentAlbumIndex': 0,
            'currentTrackIndex': 0,
            'state': 'stop'
        },

        initialize: function() {
            playlist = new Playlist();    // <<< this line changed!
        },

之前也this.collection提到了这里的集合，

window.BackboneTunes = Backbone.Router.extend({
    routes: {
        '': 'home',
        'blank': 'blank'
    },

    initialize: function() {
        this.playlistView = new PlaylistView({
            collection: window.player.playlist,  // <<<< THIS ONE!
            player: window.player,
            library: window.library
        });

        this.libraryView = new LibraryView({
            collection: window.library
        });
    },
4

1 回答 1

3

主干视图包含一个集合或模型，因为视图旨在呈现模型或模型集合中包含的数据。

此示例引发错误，因为 this.collection 尚未定义。为此，您需要初始化一些集合，然后将其传递给您的视图。

new PlayListView({collection: someCollection});

于 2012-06-12T11:16:58.657 回答