Backbone-on-rails事件聚合器

时间:2013-08-08 21:01:01

标签: backbone.js ruby-on-rails-3.1 coffeescript eventaggregator event-listener

我已将视图分离,我希望对彼此的事件做出回应。我在application.js文件中添加了一个事件聚合器,并在第一个视图中触发了我的函数中的事件。不过,我似乎无法获得第二个视图来响应该事件。我看过Derrick Bailey关于事件聚合器和documentcloud.github.io讨论的讨论。我无法找到适用于coffeescript的语法,我不知道如何翻译我找到的语法。

我想发布事件的第一个观点如下:

class Mlp.Views.PoniesIndex extends Backbone.View

  poniesTemplate: JST['ponies/index']

  events:
    'submit #new_pony': 'createPony'
    'click #pony_up': 'ponyUp'

  initialize: ->
    console.log(Mlp.Collections.Settings)
    @collection.on('reset', @render, this)
    @collection.on('add', @appendPony, this)
    @collection.on('change', @render, this)

  ponyUp: (event) ->
    event.preventDefault()
    Mlp.vent.trigger('ponyUp', @collection)
    @collection.ponyDown()
    @collection.ponyUp()

我的事件聚合器位于application.js文件中:

//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require mlp
//= require_tree ../templates
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
//= require_tree ./routers
//= require_tree .

Mlp.vent = _.extend({}, Backbone.Events);

当我将它添加到我的application.js文件中时,我得到了我想要的控制台日志:

Mlp.vent.bind("ponyUp", function(collection){
 console.log("pony up!");
});

但是当我尝试在视图中添加事件活页夹时,我希望收到已发布的事件,但我什么都没得到:

class Mlp.Views.SettingsIndex extends Backbone.View

  template: JST['settings/index']

  events:
     'submit #new_setting': 'createSetting'
     'click #change_of_venue': 'randomSetting'

  initialize: ->
    @collection.on('ponyUp', @alterbox, this) 
    @collection.on('reset', @render, this)
    @collection.on('add', @appendSetting, this)
    @collection.on('change', @render, this)

  alertbox: (collection) ->
    event.preventDefault()
    console.log("pony up!")

我尝试了各种不同的语法,但我仍然不确定我是否应该在事件声明中的初始化或绑定中绑定到集合。我见过的例子使用了下划线的_.bindAll。当我尝试它时,它抛出“无法读取未绑定的'绑定'”,即使我在我的application.js中需要下划线。我确定这是一些我不理解的基本语法。

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

您的收藏集不会发送'ponyUp'事件,您的事件聚合器(Mlp.vent)将会发送。当你这样说:

Mlp.vent.trigger('ponyUp', @collection)

您要求Mlp.vent'ponyUp'作为参数发送@collection个事件,而不会从'ponyUp'触发@collection个事件。这意味着你想听取Mlp.vent的事件,并且:

@collection.on('ponyUp', @alterbox, this) 

看起来应该更像这样:

Mlp.vent.on('ponyUp', @alterbox, this)

或者,您可以手动触发集合上的事件:

@collection.trigger('ponyUp', @collection)

这两种方法的主要区别在于,使用Mlp.vent允许任何人监听事件,即使他们手头没有集合,而@collection.trigger方法要求每个人都有参考收集之前,他们可以听取这个活动。