1

我正在测试布局如何监听其子视图的自定义事件。

我在这里创建了一个 jsFiddle ，其中有一个布局、2 个区域，我实例化了 2 个 ItemView 并将它们显示在布局的区域中。小提琴在 CoffeeScript 中。

<div id="region"></div>
<script id="layout-tmpl" type="text/_">
    <h3>Heading</h3>
    <div id="content"></div>
    <div id="content2"></div>    
</script>

<script id="item-tmpl" type="text/_">
    <form>
        <label>Firstname:</lable>
        <input type="text" name="firstname" value="<%= firstname %>" />
        <input type="button" value="Save" id="save" />
    </form>    
</script>

CoffeeScript 是：

SimpleLayout = Backbone.Marionette.Layout.extend 
    template: '#layout-tmpl' 
    regions:
        main: '#content'
        other: '#content2'
    initialize: () ->
        console.log @
    onShow: () ->
        _.each @.regionManagers, (region, name, something) =>
            console.log region.currentView
            # @.bindTo region.currentView, "custom:event", @callback           
    callback: () ->
        alert "HELL YEAH"

SimpleItemView = Backbone.Marionette.ItemView.extend
    template: "#item-tmpl"
    events:
        'click #save': 'save'
    save: (evt) ->             
        evt.preventDefault()
        @.trigger "custom:event"

region = new Backbone.Marionette.Region el: "#region"    
layout = new SimpleLayout() 
region.show layout
layout.main.show new SimpleItemView model: (new Backbone.Model firstname: "Olivier")
layout.other.show new SimpleItemView model: (new Backbone.Model firstname: "Travis")

我希望布局能够监听 ItemViews 的自定义事件。在 onShow 中，我正在遍历区域管理器并尝试访问 currentView 对象，但它返回未定义。

如果我在 SimpleLayout 类之外附加相同的事件处理程序，并且在显示项目视图之后，布局处理程序会正确处理自定义事件。

谢谢你的帮助。

4

1 回答 1

1

onShow我认为正在发生的事情是当布局被调用时视图实际上并没有准备好：

layout = new SimpleLayout() 

region.show layout

    // onShow 在这里调用，没有要绑定的视图，因为它们还没有被创建 

layout.main.show new SimpleItemView model: (new Backbone.Model firstname: "Olivier")
layout.other.show new SimpleItemView model: (new Backbone.Model firstname: "Travis") 

// now the views are ready, they can be bound to
_.each layout.regionManagers, (region, name) =>
    console.log region.currentView
    region.currentView.bindTo region.currentView, "custom:event", () ->
        alert "HELL YEAH"

这是一个分叉的小提琴，它显示了custom:event被触发的情况。

于 2012-12-11T05:00:12.127 回答