0

私はバックボーンにまったく慣れていないので、リストアイテムを作成するためにそれを使用する必要があります。各リストアイテムには、モデルとビューがあります。そのリストなので、コレクションにとって理想的なソリューションのように見えますが、私はそれらを使用するのに苦労しています。

これが現在のバージョンで、コレクションを使用するように変更したいと思います。

// The Model & view
var IntroModel = Backbone.Model.extend({});
var Introview = Backbone.View.extend({
    template: _.template( $('#taglist-intro').text() ),
    render: function() {
        console.log( this.model.attributes );
        this.$el.append( this.template( this.model.attributes ) );
    }
});

// We will store views in here
// Ideally this would be a collection
views = [];

// Get the data for that collection
$.getJSON( url, function( json ) {

    _.each( json, function( item ) {

        // Create each model & view, store views in the views array
        var model = new IntroModel( item );
        var view = new Introview({
        model : model
        })  
        views.push( view );

    })

})

// I can render a view like this
// But I'd rather it rendered the view when I add items to the collection
views[0].render()

だから私が持っているものはうまくいくが、それは実際には「バックボーンの方法」ではない。これは少し無意味に思えます：

  1. 配列ではなく、コレクションを使用することをお勧めします
  2. アイテムが配列に追加されたときにビューがレンダリングされる方がよいでしょう
  3. それはバックボーンではありません。

特定のコード例を提供できない場合でも、この問題を扱っているリンクとリソースに非常に感謝しています。

乾杯、

リチャード

4

1 に答える 1

1

現在の実装がバックボーンの方法ではないというあなたの権利。あなたがしていることのほとんどは、バックボーンのコレクション オブジェクトによって直接処理されます。バックボーンでは、コレクションは基本的に、追加のメソッドがアタッチされた単なる配列です。これらのメソッドは、コレクションに力を与えるものです。バックボーンには、次のような多くの機能があります。

  • 'url' プロパティ: このプロパティを使用すると、フェッチ メソッド ( myCollection.fetch() など) を実行すると、コレクションが自動的に作成されます。
  • コレクションの「リセット」イベントに関数をバインドできます。このイベントは、コレクションにデータを入力するときにトリガーされます。コレクションの render イベントへの呼び出しを含めることにより、コレクションが変更されたときに、コレクションは関連するビューを自動的にレンダリングできます。関数をアタッチできる他のコレクション イベント (たとえば、新しいモデルの「追加」など) もあります。

  • バックボーンのドキュメントは、開始するのに最適な場所であることがわかりました。ただし、単純な例は常に役に立ちます。次のコードは、単純なコレクションを定義する方法と、2 つのビュー (リストを作成する 1 つのビューと、リスト内の項目をレンダリングする別のビュー) を作成する方法を示しています。コレクションでの url プロパティの使用に注意してください。fetch() メソッドを実行すると、Backbone はこれを使用してコレクションのコンテンツを取得します (OrgListView オブジェクトを参照)。また、ビューの render メソッドがコレクションの「reset」イベントにどのようにバインドされているかにも注意してください。これにより、コレクションにデータが入力された後に render イベントが確実に呼び出されます (OrgsListView の initialize メソッドを参照してください)。 

            /**
     * Model
     */
    var Org = Backbone.Model.extend();

    /**
     * Collection
     */
    var Orgs = Backbone.Collection.extend({
        model: Org,
        url: '/orgs.json'
    });

    /**
     * View - Single Item in List
     */
    var OrgItemView = Backbone.View.extend({
        tagName: 'li',
        initialize: function() {
            _.bindAll(this, 'onClick', 'render');
            this.model = this.options.model;
            // Create base URI component for links on this page. (e.g. '/#orgs/ORG_NAME')
            this.baseUri = this.options.pageRootUri + '/' + encodeURIComponent(this.model.get('name'));
            // Create array for tracking subviews.
            /*var subViews = new Array();*/
        },
        events: {
            'click a.test': 'onClick'
        },
        onClick: function(event) {
            // Prevent default event from firing.
            event.preventDefault();
            if (typeof this.listContactsView === 'undefined') {
                // Create collection of contacts.
                var contacts = new ContactsByOrg({ url: '/orgs.json/' + encodeURIComponent(this.model.get('name')) });
                this.listContactsView = new ListContactsView({ collection: contacts, baseUri: this.baseUri });
                this.$el.append(this.listContactsView.render().el);
            }
            else {
                // Close View.
                this.listContactsView.close();
                // Destroy property this.listContactsView.
                delete this.listContactsView;
            }
        },
        onClose: function() {
//      console.log('Closing OrgItemView');
        },
        render: function() {
            // TODO: set proper value for href. Currently using a dummy placeholder
            this.$el.html('<a class="test" href="' + this.baseUri + '">' + this.model.get('name') + '</a>');
            return this;
        }
    });

    /**
     * View - List of organizations
     */
    var OrgsListView = Backbone.View.extend({
        className: 'orgs-list',
        initialize: function() {
            console.log('OrgsListView');
            _.bindAll(this, 'render');
            this.pageRootUri = this.options.pageRootUri;
            this.collection = this.options.collection;
            // Bind render function to collection reset event.
                                this.collection.on('reset', this.render);
            // Populate collection with values from server.
            this.collection.fetch();
        },
        onClose: function() {
            this.collection.off('reset', this.render);
//      console.log('Closing OrgsListView');
        },
        render: function() {
            var self = this;
            this.$el.html('<ul></ul>');
            this.collection.each(function(org, index) {
                var orgItemView = new OrgItemView({ model: org, pageRootUri: self.pageRootUri });
                self.$('ul').append(orgItemView.render().el);
            });
            return this;
        }
    });
于 2012-09-03T22:52:55.043 に答える