Backbone.js我應該在何時何地獲取收集數據？

Question

我對何時何地實例化集合並在主干應用程序中獲取它們感到困惑。

我已經看到它已經完成了一些工作，並在我非常簡單的小型CRUD聯系人管理器應用程序Im中進行了工作，但是我確定有些我不知道的約定和“陷阱”。

這些是我看過的選項，要么開始工作，要么是“工作” ：)從概念上講，選項4似乎是最好的選擇，但我正在加緊討論。

壞主意：1）在我對路由器真正執行任何操作之前，我實例化了一個新集合並調用fetch，然后在doc ready語句中啟動app.view。

    // Create an Instance of the collection
    App.contacts = new App.Collections.Contacts;

    App.contacts.fetch({update: true, remove: false}).then(function() {
        new App.Views.App({ collection : App.contacts });
    });

• 這行得通-但如果我要在一個App中擁有多個集合，似乎並不是真正正確的方法，我認為這個想法失敗了。

錯誤的想法：2）當我開始使用路由器時，我認為在路由器初始化方法中也可以完成上述操作，但我認為仍然存在相同的問題。

壞主意：3）我嘗試在collections的init方法中進行讀取，盡管我在很多地方都讀過，但這似乎不是一個好主意，該方法似乎有效。

好的想法（？）：但是我想讓它工作：4）我認為，當我實例化其視圖時，以這種方式獲取一個集合的數據是有意義的，這樣，如果我每個都有一個聯系人集合和一個任務集合僅當我在路由器中實例化其視圖時才會從服務器中拉出。 對我來說，這似乎是一個成功的公式，但是當我嘗試將其放入View初始化或呈現方法中時，我的this.collection.on('add', this.addOne, this); 給我無法在未定義上調用.on。 （注意：我嘗試將其放入成功函數中）

這是我的想法，請幫忙。

干杯。

編輯：附加代碼，因此我們可以診斷下面討論的雙重負載。

在我的路由器文件中，我正在使用此實用程序obj：

var ViewManager = {
    currentView : null,
    showView : function(view) {
        if (this.currentView !== null && this.currentView.cid != view.cid) {
            this.currentView.remove();
        }
        this.currentView = view;
        return view;
    }
}

在我的路由器中：我正在路由中調用此方法

list: function() {
    console.log('backbone loading list route');

    var AllContactsView = new App.Views.Contacts({ //init method runs now
        collection : App.contacts
    });

    ViewManager.showView(AllContactsView);

},

我的收藏

App.Collections.Contacts = Backbone.Collection.extend({
    model: App.Models.Contact,
    url: 'contacts',
});

在我看來

App.Views.Contacts = Backbone.View.extend({
    tagName: 'tbody',

    initialize: function() {

            this.listenTo(this.collection, 'sync', this.render);
            this.listenTo(this.collection, 'add', this.addOne);

        this.collection.fetch({
            // update: true,
            // remove: false
        });

    },

    render: function() {
        // append the list view to the DOM
        $('#allcontacts').append(this.el);

        // render each of the single views
        this.collection.each( this.addOne, this);
        return this;
    },

    addOne: function(contact) {
        var contactView = new App.Views.Contact({ model: contact});
        this.$el.append(contactView.render().el);
    }

});

在我的app.js中

// Run App
jQuery(document).ready(function($) {

    // Create an Instance of the collection
    App.contacts = new App.Collections.Contacts;

    // Init BB Router
    new App.Router.Route;
    Backbone.history.start(); // Kick it all off.

});

Answer 1

您的視圖應如下所示：

App.Views.Contacts = Backbone.View.extend({
    tagName: 'tbody',

    initialize: function() {

        this.listenTo(this.collection, 'reset', this.render);
        this.listenTo(this.collection, 'add', this.addOne);

        vent.on('contactR:closeAll', this.closeView, this);

        this.collection.fetch();
    },
});

Answer 2

因此我意識到了我的錯誤，因為這個討厭的關鍵詞使this關鍵字變得晦澀，所以現在它是一個風格或概念上的問題

可能是在我的設置文件中，然后才呼叫路由器。

App.contacts = new App.Collections.Contacts;

在我的路由器中：

list: function() {
    var AllContactsView = new App.Views.Contacts({
        collection : App.contacts
    });

    ViewManager.showView(AllContactsView);

},

在視圖中：

App.Views.Contacts = Backbone.View.extend({
    tagName: 'tbody',

    initialize: function() {
        var that = this;
        this.collection.fetch({ update: true, remove: false}).then(function() {
            that.collection.on('add', that.addOne, that);
            vent.on('contactR:closeAll', that.closeView, that);
            that.render();
        });


    },
});

在我看來，這似乎更加靈活，從概念上講也很合適，但我希望收到有關此答案的反饋。

Answer 3

因此，在render方法中使用.each似乎毫無意義，因為add事件在獲取成功連接后且sync事件觸發之前觸發。 因此，add事件的listenTo會在需要時觸發addOne，而render事件現在只需在同步時將集合追加到dom即可。

App.Views.Contacts = Backbone.View.extend({
tagName: 'tbody',

initialize: function() {

        this.listenTo(this.collection, 'sync', this.render);
        this.listenTo(this.collection, 'add', this.addOne);

    this.collection.fetch();

},

render: function() {
    // append the list view to the DOM
    $('#allcontacts').append(this.el);

    /* 
     render each of the single views - removing this seems to set everything 
     right in the world
   */

   // this.collection.each( this.addOne, this);
    return this;
},

addOne: function(contact) {
    var contactView = new App.Views.Contact({ model: contact});
    this.$el.append(contactView.render().el);
}

});

Answer 4

因此，經過大量的搜索，閱讀和測試之后，我着手進行以下工作。 我不認為這是最佳選擇，因為我們迫使主干網運行其reset事件，這似乎是大多數示例應用程序執行此操作的方式，盡管我感覺這是在忽略默認行為已更改的事實，當然這是有原因的嗎？

最終，這目前可以解決，但我很高興看到替代方案。

/*Collection view
- - - - - - -*/
App.Views.Contacts = Backbone.View.extend({
    tagName: 'tbody',
    initialize: function() {
          this.listenTo(this.collection, 'add', this.addOne);
          this.listenTo(this.collection, 'reset', this.addAll);
          this.listenTo(this.collection, 'all', this.render);
          this.collection.fetch({reset:true});
    },
    render: function() {
        // append the list view to the DOM
        $('#allcontacts').append(this.el);
        return this;
    },
    addAll : function() {
        this.collection.each( this.addOne, this);
    },
    addOne: function(model) {
        var contactView = new App.Views.Contact({ model: model});
        this.$el.append(contactView.render().el);
    }
});

我有這個實用程序，我已經添加了調用以將其渲染回：

var ViewManager = {
    currentView : null,
    showView : function(view) {
        if (this.currentView !== null && this.currentView.cid != view.cid) {
            this.currentView.remove();
        }
        this.currentView = view;
        return view.render();
    }
}

在我的路由器中，我將其稱為列表路由：

list: function() {
    console.log('backbone loading list route');

    var AllContactsView = new App.Views.Contacts({ //init method runs now
        collection : App.contacts
    });

    ViewManager.showView(AllContactsView);

},

就像我說的那樣，我覺得可能有一個或兩個小問題，但目前它在我的應用程序中有效，毫無疑問，我稍后會再次討論。