骨干获取回调的正确方法 [英] Backbone fetch callback the proper way

查看:169
本文介绍了骨干获取回调的正确方法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的主干应用程序有一个名为视图安排后,我有点困惑,呼吁成功和错误的正确功能的差异,我试过两个拖可能下面列出,但我没'T有什么区别,什么是调用从路由器放置在外界看来函数的正确方法:

第一种方式:

 规定([
            应用程序/收藏/日程安排,
            应用程序/视图/时间表
        ],功能(ScheduleCollection,ScheduleView){           VAR scheduleCollection =新ScheduleCollection()
            scheduleView =新ScheduleView({
                型号:scheduleCollection
            });            scheduleCollection.fetch({
                复位:真实,
                成功:函数(){
                    scheduleView.successHandler();
                },
                错误:函数(){
                    scheduleView.errorHandler()
                }
            });
        });

第二种方式

 规定([
            应用程序/收藏/日程安排,
            应用程序/视图/时间表
        ],功能(ScheduleCollection,ScheduleView){           VAR scheduleCollection =新ScheduleCollection()
            scheduleView =新ScheduleView({
                型号:scheduleCollection
            });            scheduleCollection.fetch({
                复位:真实,
                成功:scheduleView.successHandler()
                错误:scheduleView.errorHandler()
            });
        });

在scheduleView

  successHandler:功能(){
   的console.log(成功);
}
erroHandler:功能(){
   的console.log('错误');
}


解决方案

有另一种选择:而不是直接引用的观点,提供集合为有关意见的参考,并听取相关事件。例如,侦听在有关查看集合复位。如果这不是你要挂钩到事件,然后触发成功/错误回调您的视图可以收听到自定义事件。

下面是一个例子处理复位 - 扩展您的ScheduleView:

  VAR ScheduleView = Backbone.View.extend({    初始化:功能(){        this.listenTo(this.collection,复位,this.handleReset);
    },    handleReset:功能(){
        //做任何你需要做
    }
};VAR scheduleCollection =新ScheduleCollection();
VAR scheduleView =新ScheduleView({集合:scheduleCollection});

下面是从收集绑在成功/错误处理程序自定义事件的例子:

  VAR ScheduleCollection = Backbone.Collection.extend({    getResults:功能(){        VAR自我=这一点;        this.fetch({
            复位:真实,
            成功:函数(收集,响应,期权){
                //你可以通过其他选项事件触发你在这里也
                self.trigger('successOnFetch');
            },
            错误:功能(收集,响应,期权){
                //你可以通过其他选项事件触发你在这里也
                self.trigger('errorOnFetch');
            }
        });
    }
 };VAR ScheduleView = Backbone.View.extend({    初始化:功能(){        this.listenTo(this.collection,'successOnFetch',this.handleSuccess);
        this.listenTo(this.collection,'errorOnFetch',this.handleError);
    },    handleSuccess:功能(选件){
        //选择将任何选项你触发自定义事件经过时,
    },    的HandleError:功能(选件){
        //选择将任何选项你触发自定义事件经过时,
    }
};VAR scheduleCollection =新ScheduleCollection();
VAR scheduleView =新ScheduleView({集合:scheduleCollection});
scheduleCollection.getResults();

连接最多这种方式的优点是删除了收集对视图的依赖。如果你想比一个视图更侦听事件发生在你的收藏,这是特别关键的(或者你收集模型),是为你的应用骨干更加松散耦合的架构。

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:

The first way:

        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()
                }
            });
        });

The second way

        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()                  
            });
        });

in the 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.

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();

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.

这篇关于骨干获取回调的正确方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆