主幹事件觸發和事件綁定

Question

我是新來的主幹。我只想知道全局事件觸發並綁定每個事件的回調。我試過像這樣...

landing.view.js

'use strict'; 

var $ = require('jquery'); 
var Backbone = require('backbone'); 
var _ = require('underscore'); 
var tpl = require('text!components/landing-page/templates/landing-page.html'); 

return Backbone.View.extend({ 

    el: '.view-container', 

    template: _.template($(tpl).html()), 

    events:{ 
     'click .btn-show': 'showUsersListHandler' 
    }, 

    initialize: function(){ 

     this.render(); 
    }, 

    render: function(){ 

     $(this.el).html(this.template); 
     return this; 
    }, 

    showUsersListHandler: function(evt){ 
     Backbone.trigger('userPage', {trigger:true}); 
    } 
}); 

another.view.js

'use strict'; 

var Backbone = require('backbone'); 
var _ = require('underscore'); 
var $ = require('jquery'); 
var tpl = require('text!components/user-logs-listing/templates/user-logs-listing-tpl.html'); 

return Backbone.View.extend({ 

    el: '.users-list-container', 

    template: _.template($(tpl).html()), 

    initialize: function(){ 
     this.render(); 
    }, 

    render: function(){ 

     $(this.el).html(this.template); 
    } 

}); 

應用路由器

'嚴格使用';

var $ = require('jquery'); 
var Backbone = require('backbone'); 
var viewContainer = require('inits/utils'); 
var landingView = require('components/landing-page/views/landing-page'); 
var userListingView = require('components/user-logs-listing/views/user-logs-listing.view'); 

return Backbone.Router.extend({ 

    routes: { 
     "": "landing", 
     "usersList": "usersPage" 
     //'*path': 'defaultRoute' 
    }, 

    initailize: function(){ 
    Backbone.listenTo(Backbone, 'userPage', this.usersPage) 

    }, 

    landing: function(){ 

     viewContainer.createContainer('view-container'); 
     new landingView(); 
    }, 

    usersPage: function(){ 

     //$('.view-container').remove(); 
     viewContainer.createContainer('users-list-container'); 
     new userListingView(); 
    } 
}); 

如果我點擊登陸視圖中的按鈕，它應該觸發'userPage'，它應該導航到#UsersPage。問題是如何觸發並綁定全局事件的回調？幫助我得到正確的解決方案！謝謝。

Answer 1

OK，我會建議做這樣的：

創建一個新的文件Events.js

Events.js

define(['underscore', 
    'backbone' 
], function(_, Backbone) { 
    "use strict"; 
    return _.extend({}, Backbone.Events); 
}); 

現在，在landing.view。 js

var $ = require('jquery'); 
    var Backbone = require('backbone'); 
    var _ = require('underscore'); 
    var Events = require('Events'); 
    var tpl = require('text!components/landing-page/templates/landing-page.html'); 

----- 
    Events.on('customEvent1',this.customCallback1); 
----- 

同樣，在another.view.js

var Backbone = require('backbone'); 
var _ = require('underscore'); 
var Events = require('Events'); 
var $ = require('jquery'); 
var tpl = require('text!components/user-logs-listing/templates/user-logs-listing-tpl.html'); 

----- 
    Events.on('customEvent2',this.customCallback2); 
----- 

現在，任何你想要觸發這些自定義事件，執行如下：

Events.trigger('customEvent1'); 

Events.trigger('customEvent2'); 

，包括活動的文件等。無論您想使用它。

希望它有幫助！