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 の呼び出しthis.collection.trigger('select', this.model);と extendsでは、 のwindow.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 に答える