2017-03-02 6 views
0

私はバックボーンが新しくなっています。私は、イベントごとにコールバックをトリガーしてバインドするグローバルイベントについて知りたいだけです。私は...このようバックボーンイベントトリガーとイベントバインディング

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

}); 

アプリ-ルータ

を試してみました'use strict';

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に移動する必要があります。問題は、グローバルイベントのコールバックをトリガーしてバインドする方法です。正しい解決策を手に入れよう!ありがとう。

+0

グローバルイベントとはどういう意味ですか? – Nitesh

+0

私が質問で述べたように、私が間違っていなければ、着陸ビューで 'userPage'イベントを起動すると別のビューが表示されるはずです。私はルータでイベントレスポンスを添付しましたが、動作していませんでしたか? – Navin

答えて

0

OK、私はこのようにそれを行うことをお勧めします:

landing.viewで、新しいファイルを今すぐ

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

Events.js

Events.jsください。 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); 
----- 
Events.trigger('customEvent1'); 

Events.trigger('customEvent2'); 

そして、あなたはそれを使用したいwhereeverイベントは、ファイルが含ま:は同様に、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); 
----- 

で、どこでも、あなたは、これらのカスタムイベントをトリガとしてやってみたいです。

希望すると助かります!

+0

私はすでに試したこのメソッドは、動作していません!問題は、リスナーにアタッチされたイベントが 'Backbone._events'(つまり、トリガー機能)に登録されていないことです。 – Navin

関連する問題