Marionette ItemView不发出“改变”事件

时间:2014-09-18 12:52:20

标签: javascript backbone.js coffeescript marionette

问题

我正在学习如何使用Marionette / Backbone创建单页应用程序的教程,目前它正在描述如何传递有关当前用户的信息。当前用户存储在连接到全局App的变量中,并且当前正在呈现为页脚模板的一部分。问题是当更新当前用户时,相应的ItemView也不会更新。

在应用程序启动时,当前用户将变为有效的Backbone模型(使用来自使用gon引导的数据的信息)并在页脚中正确呈现。但是,当从控制台更新 full_name 属性时(使用 Demo.currentUser.set({full_name:“John Smith”}))页脚没有变化。

我尝试了什么

我相信我已正确实现了将change事件链接到render函数,如教程和here中所述。

我已尝试将模型更新为其他用户,以防设置方法未触发更改事件,但这也无效。此外,我确实尝试实现一些日志记录,如下所示,以检测更改事件是否被触发,并且似乎没有被触发。

我搜索过回答类似问题的人,但是,有些问题似乎涉及ItemViews in CollectionViews或更复杂events being fired等问题。我还查看了Marionette和Backbone文档,试图找出确切触发更改事件的原因,但无法找到答案。因此,我现在有点卡住了。

对此问题的任何帮助都将非常感激。

代码

FooterApp Show控制器(我还公开了currentUser变量,并检查模型是否正确更新):

@Demo.module "FooterApp.Show", (Show, App, Backbone, Marionette, $, _) -> 

    Show.Controller = 

        showFooter: ->
            currentUser = Backbone.Radio.request "global", "get:current:user"
            footerView = @getFooterView currentUser 
            App.footerRegion.show footerView 

        getFooterView: (currentUser) -> 
            new Show.Footer 
               model: currentUser

FooterApp Show视图(注释掉的位显示了记录尝试):

@Demo.module "FooterApp.Show", (Show, App, Backbone, Marionette, $, _) ->

    class Show.Footer extends Marionette.ItemView
        template: "footer/show/templates/show_footer"

        modelEvents:
           "change" : "render" # "change" : "onChange"

        #  onChange: ->
        #    console.log "Model changed"
        #    render

视图模板:

<div id="footer">
    <div class="container">
        <p class="text-muted">BackboneRails - Episode 5 Creation - Current User: <%= @full_name%></p>
    </div>
</div>

App.js.coffee,用于显示当前用户的存储和检索位置:

@Demo = do (Backbone, Marionette) ->

    Backbone.Radio.DEBUG = true
    # Backbone.Radio.tuneIn "global"

    App = new Marionette.Application

    App.on "before:start", (options) ->
        @currentUser = Backbone.Radio.request "global", "set:current:user", options.currentUser

    Backbone.Radio.reply "global", "get:current:user", ->
        App.currentUser

    App.addRegions
        headerRegion: "#header-region"
        mainRegion: "#main-region"
        footerRegion: "#footer-region"

    App.addInitializer ->
        App.module("FooterApp").start()
        App.module("HeaderApp").start()

    App.on "start", ->
        if Backbone.history
           Backbone.history.start()

    App
编辑:感谢您的帮助(对于缓慢的回复感到抱歉 - 我一直在搬房子,这有点忙乱)。它现在正在工作,我很确定这是我的coffeescript的格式化问题(在问题的格式化中不可见)。我在更改呈现之间的链接上方添加了日志记录代码,它开始工作。使用 git diff ,唯一的区别似乎是一些缩进,我认为这会改变生成的javascript。

2 个答案:

答案 0 :(得分:3)

我基本上总是喜欢采用这种方法来调试没有触发的事件或者没有像我期望的那样工作:

你可以尝试做一个

events: {
  "all": "log"
}

log: function(e) {
  console.log e;
}

这应该记录每个被解雇的事件。我发现它在排除故障时非常有用。

答案 1 :(得分:0)

请发布您的所有代码。我想在没有看到您的所有代码的情况下做出的猜测是您使用多个currentUser实例,因此更改事件是在与传递给视图的用户模型不同的用户模型上发出的。

顺便说一句 - Backbones和Marionettes代码非常容易访问。不要害怕它 - 阅读并调试它。