如何将 Backbone 事件处理函数作为字符串传递？

Question

我有一个 Backbone 视图 (SearchView)，它有多个搜索处理程序。搜索处理程序函数必须根据某些进程类型作为字符串动态传递。

这是我的代码

SearchView = Backbone.View.extend({

    el: wrapper,        
    process : "defaultHandler", 
    event: {},              
    template: _.template("<div id='cpntainer'><input type='button' id='search' value='Click Here'/><div>"),     
    initialize: function(options){
        this.render();          
        this.vent = options.vent;   
        this.options = options.process
        this.event = this.getEvent();           
    },                      
    getEvent : function(){          
        return {"click #search": this.process};
    },              
    searchHandler1: function( event ){
        alert('calling Handler1');              
    },
    searchHandler2: function( event ){
        alert('calling Handler1');              
    },
    searchHandler3: function( event ){
        alert('calling Handler1');              
    },
    defaultHandler: function( event ){
        alert('calling Deafault Handler');              
    },
    render: function () {
        this.$el.html(this.template());         
        return this;
    }       
}); 
var mainEvent = _.extend({}, Backbone.Events);
var myView = new SearchView({ vent: mainEvent, process: "searchHandler1" });

问题是，事件没有触发，那么这段代码有什么问题？？

Answer 1

您的事件对象称为 event - 它应该是 events。看看有没有帮助。

关于你的第二个问题（下面的评论）你设置 this.options = options.process 它应该是 this.process = options.process.

Answer 2

可以直接define your events hash as a function:

The events property may also be defined as a function that returns an events hash, to make it easier to programmatically define your events, as well as inherit them from parent views.

例如，

SearchView = Backbone.View.extend({ 
    process : "defaultHandler",
    events: function () {
        return {"click #search": this.process};
    },

    initialize: function (options) {
        this.process = options.process;
    },                      

    searchHandler1: function (event) {
        console.log('calling Handler1');              
    },
    searchHandler2: function (event) {
        console.log('calling Handler2');              
    }   
});

和演示 http://jsfiddle.net/rzm21q0g/

Answer 3

在 processName 上使用带有 switch 块的单个事件处理程序有什么问题？试试这个：

SearchView = Backbone.View.extend({
    el: wrapper,        
    process : "defaultHandler", 
    events: {
        'click #search': 'onSearchClick'
    },              
    template: _.template("<div id='cpntainer'><input type='button' id='search' value='Click Here'/><div>"),     
    initialize: function(options){
        this.render();          
        this.vent = options.vent;   
        this.process = options.process        
    }, 
    onSearchClick: function(event){
        switch(this.process){
            case 'searchHandler1':
                alert('calling Handler1');
            break;
            case 'searchHandler2':
                alert('calling Handler2');
            break;
            case 'searchHandler3':
                alert('calling Handler3');
            break;
            default:
                alert('calling Deafault Handler');
            break;
        }
    },
    render: function () {
        this.$el.html(this.template());         
        return this;
    }       
}); 
var mainEvent = _.extend({}, Backbone.Events);
var myView = new SearchView({ vent: mainEvent, process: "searchHandler1" });

如何将 Backbone 事件处理函数作为字符串传递？

How to pass Backbone event handler function as string?

jquery

backbone.js

backbone-views

backbone-events