質問

バックボーン.jsの使用方法を学ぶためにチュートリアルを調べています。バックボーンビューがコレクションを「見ている」ことを理解するのに苦労しています。

以下はビューコードと、その下にコレクションコードです。

変数$アルバムは、特定のクラス「.albums」に割り当てられていることがわかりますが、このコードが「this.collection」を参照している方法はわかりません。

ビューとコレクションの両方が、標準のbackbone.viewとbackbone.collectionクラスから拡張されています。それを見るだけで、私は彼らがお互いが存在することをどのように知っているかを見ることができません。 「これ」という言葉は、この特定のインスタンスのライブラリビューを指していると仮定しています。

これが私の主な質問だと思います:

コードはどうですか collection = this.collection 外部コレクションを見ることができますか?

// A wrapper view to display each album in Library
    window.LibraryView = Backbone.View.extend({         
        tagName: 'section',
        className: 'library',

        initialize: function() {
            _.bindAll(this, 'render');
            this.template = _.template($('#library-template').html());
            this.collection.bind('reset', this.render);
        },

        render: function() {            
            var $albums,
                collection = this.collection;           

            $(this.el).html(this.template({}));
            $albums = this.$('.albums');
            collection.each(function(album) {
                var view = new LibraryAlbumView({
                    model: album,
                    collection: collection
                });
                $albums.append(view.render().el);
            });
            return this;
        }

    });

これがアルバムコレクションです:

// Albums Collection
    window.Albums = Backbone.Collection.extend({
        model: Album,
        url: '/albums'
    })

編集:


ここで助けのおかげで見つけたと思います:

ライブラリ変数を作成し、新しいアルバムコレクションに割り当てる別のコードがありました。

window.library = new Albums();

また、ルーターには、「ライブラリ」変数に渡される初期化ステートメントがあります。

initialize: function() {
            this.libraryView = new LibraryView({
                collection: window.library
            });

今ではもっと理にかなっているようです。 :)

他の誰かが私と同じように混乱している場合に備えてこれを投稿するだけです。

役に立ちましたか?

解決

コレクションは、LibraryViewコンストラクターに渡す必要があります。例えば、

myLibrary = new LibraryView({
  collection: new Albums()
})

ただし、ここでは重要な魔法が起こります。ビューに渡されたすべてのコンストラクターは、ビューの中に終わる options 財産。ただし、選択数のプロパティは、ビュー自体にコピーされます。だからあなたは言うことができます this.collection それ以外の this.options.collection.

これらの特別な特性は次のとおりです。

「モデル」、「コレクション」、「el」、「id」、「属性」、「className」、「tagname」

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top