Backbone fetch 回调的正确方式 [英] Backbone fetch callback the proper way

问题描述

我的 Backbone 应用程序有一个名为 schedule 的视图，我对成功和错误调用正确函数的区别有点困惑，我尝试了下面列出的两种可能，但我没有没有什么区别，从外部视图中的路由器调用函数的正确方法是什么:

My Backbone application has a view called schedule, I am a bit confused about the difference of calling the proper function on success and error, I am tried the both of tow possible listed below but i didn't what is difference and what is the right way to call a function from router placed in outside view:

第一种方式:

        require([
            'app/collections/schedule',
            'app/views/schedule'
        ], function(ScheduleCollection, ScheduleView) {

           var scheduleCollection = new ScheduleCollection(),
            scheduleView = new ScheduleView({
                model: scheduleCollection
            });

            scheduleCollection.fetch({
                reset: true,                
                success: function(){
                    scheduleView.successHandler();
                },
                error: function(){
                    scheduleView.errorHandler()
                }
            });
        });

第二种方式

        require([
            'app/collections/schedule',
            'app/views/schedule'
        ], function(ScheduleCollection, ScheduleView) {

           var scheduleCollection = new ScheduleCollection(),
            scheduleView = new ScheduleView({
                model: scheduleCollection
            });

            scheduleCollection.fetch({
                reset: true,                
                success: scheduleView.successHandler(),
                error: scheduleView.errorHandler()                  
            });
        });

在 scheduleView

successHandler: function(){
   console.log('success');
}


erroHandler: function(){
   console.log('error');
}

推荐答案

还有另一种选择:不是直接引用视图，而是提供集合作为对相关视图的引用并侦听相关事件.例如，在相关视图中侦听集合上的重置.如果这不是您想要挂钩的事件，则从您的视图可以侦听的成功/错误回调中触发自定义事件.

There's another option: rather than referencing the views directly, provide the collection as a reference to the concerned views and listen for relevant events. For example, listen for reset on the collection in the concerned view. If that's not the event you want to hook into, then trigger a custom event from the success/error callbacks that your view can listen to.

这是一个处理重置的示例 - 扩展您的 ScheduleView:

Here's an example handling reset - extend your ScheduleView:

var ScheduleView = Backbone.View.extend({ 

    initialize: function () {

        this.listenTo(this.collection, 'reset', this.handleReset);
    },

    handleReset: function () {
        // do whatever you need to do here
    }
};

var scheduleCollection = new ScheduleCollection();
var scheduleView = new ScheduleView({ collection: scheduleCollection });

以下是与集合中的成功/错误处理程序相关联的自定义事件示例:

here's an example of custom events tied to the success/error handlers from the collection:

var ScheduleCollection = Backbone.Collection.extend({

    getResults: function () {

        var self = this;

        this.fetch({
            reset: true,
            success: function (collection, response, options) {
                // you can pass additional options to the event you trigger here as well
                self.trigger('successOnFetch');
            },
            error: function (collection, response, options) {
                // you can pass additional options to the event you trigger here as well
                self.trigger('errorOnFetch');
            }
        });
    }
 };

var ScheduleView = Backbone.View.extend({

    initialize: function () {

        this.listenTo(this.collection, 'successOnFetch', this.handleSuccess);
        this.listenTo(this.collection, 'errorOnFetch', this.handleError);
    },

    handleSuccess: function (options) {
        // options will be any options you passed when triggering the custom event
    },

    handleError: function (options) {
        // options will be any options you passed when triggering the custom event
    }
};

var scheduleCollection = new ScheduleCollection();
var scheduleView = new ScheduleView({ collection: scheduleCollection });
scheduleCollection.getResults();

以这种方式连接的优点是您可以删除集合对视图的依赖.如果您想要多个视图来侦听您的集合(或您的集合模型)上发生的事件，并且对于您的 Backbone 应用程序来说，这是一种更松散耦合的架构，那么这一点尤其重要.

The advantage of wiring up this way is you remove the dependency the collection has on the view. This is especially key if you want more than one view to listen for events happening on your collection (or you collection models) and is a more loosely coupled architecture for your Backbone application.

这篇关于Backbone fetch 回调的正确方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！