骨干事件觸發和事件綁定

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

好的，我建議這樣做：

制作一個新文件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');

並在要使用它的任何地方包括事件文件。

希望能幫助到你！！