Events 绑定到backbone.js中视图中不工作的模型更改事件

我正在创建一个非常简单的主干应用程序来熟悉这个框架。除了将模型更改事件绑定到我的视图中的函数之外，所有这些都正常工作。我已经检查了以前的问题，没有一个有帮助

我的模型有一个变量“计数器”。视图有两个按钮，用于递增或递减模型的“计数器”。简单的东西。这一切都很好，但当我尝试在视图中侦听模型更改事件时，我只会在创建模型时收到一次通知（我假设在创建默认值时）

我知道计数器正在更新，因为如果我在更新模型后手动调用render，我可以看到效果，但为了更好的mvc ish结构，我希望查看更改事件的通知并更新自身

下面是coffeescript代码

  $ ->

      class Count extends Backbone.Model

           defaults: counter : 0

           change: -> console.log('changed')


      class Spinner extends Backbone.View

           el: $('#counterView')

           initialize: =>

                @model = new Count()
                @model.bind 'change' , @update()

           events:
                'click button#incBtn' : 'inc'
                'click button#decBtn' : 'dec'

           inc: ->

                @model.set counter : @model.get('counter') + 1

           dec: ->

                @model.set counter : @model.get('counter') - 1

           update: ->

                console.log('update')
                $('#num').html(@model.get 'counter')

      view = new Spinner()

HTML:

增量
减量
数

提前谢谢。 b

您的错误在这里：

@model.bind 'change' , @update()

您要告诉它的是，当您要将

@update

事件绑定到

@update（）

本身时，将

更改

事件绑定到

@update

返回的内容。因此，它应该是：

@model.bind 'change' , @update

（无括号）。实际上，

Spinner.update

将在

Spinner.initialize

上立即执行，正如您所发现的那样。还有几点注意：

• 无需等待

  document.ready

  来创建类。您可以先这样做（在

  document.ready

  之外），只在

  document.ready

  上实例化模型、视图等
• 在视图中创建新模型似乎有点奇怪。您可能希望执行类似的操作：

  view = new Spinner(model: new Count)
  

编辑：正如您所想，您需要

inc

上的胖箭头

=>

，

dec

和

update

。固定在下面

综合起来：

class Count extends Backbone.Model

     defaults: counter : 0

     change: -> console.log('changed')


class Spinner extends Backbone.View

     el: '#counterView'

     initialize: =>

          @model.bind 'change' , @update

     events:
          'click button#incBtn' : 'inc'
          'click button#decBtn' : 'dec'

     inc: =>

          @model.set counter : @model.get('counter') + 1

     dec: =>

          @model.set counter : @model.get('counter') - 1

     update: =>

          console.log('update')
          @$el.find('#num').html(@model.get 'counter')

 $ ->
     view = new Spinner(model: new Count)

---

好的，在做了一些修改之后，下面的内容开始起作用了。由于某些原因，当模型更新时，它无法将事件分派回视图，因此我将手动从模型中分派一个更改事件，其中包含：

 @trigger('change')

很笨重，但这是唯一适合我的东西

我还注意到使用默认值时的奇怪行为，所以我现在使用initialize（而不是通过默认值）设置计数器。要查看具有默认值的意外行为，请取消注释默认值并注释掉初始化。就像计数器=原始值0时不调度更改事件一样

class Count extends Backbone.Model

      #defaults: counter : 0

      initialize: ->
           @set counter : 0

      change: ->
           @trigger('change') #this lil fella made it work

 $ ->
      class Spinner extends Backbone.View

           el: $('#counterView')

           initialize: =>
                @model = new Count
                @model.bind 'change' , @update
                @update()

           events:
                'click button#incBtn' : 'inc'
                'click button#decBtn' : 'dec'

           inc: =>
                @model.set counter : @model.get('counter') + 1

           dec: =>                    
                @model.set counter : @model.get('counter') - 1

           update: =>                    
                $('#num').html(@model.get 'counter')


           view = new Spinner()

---

谢谢你的反馈，李纳斯。不幸的是，它没有解决这个问题。视图仍然没有收到模型更改的通知。模型正在更新，更改事件也像以前一样被调度，但是视图的更新函数从来没有听说过。您确定

console.log（'update'）

没有运行吗？在那之后，我发现了一个问题：

@model.get'counter'

不起作用，因为将

@update

的上下文传递到

@model.bind

时会丢失。简易修复：用一个粗箭头（

=>

）定义

update

）。谢谢你们两位的输入，但还是不走运。莱纳斯：关于文件准备的一个小问题。视图使用jquery选择器作为元素$（'#counterView'），因此需要在doc ready上定义类，或者需要像使用model一样将el作为参数传递给constructor；新伯爵。我想我应该指出这一点，以防其他人试图使用此代码。例如，$->需要在类微调器之前，或者在传递给构造函数（例如）的附加参数之前。view=new微调器（model:new Count，el:$（'#counterView'））@user1237615对了，您可能只需要在那里指定选择器字符串（

#counterView

），然后引用

这个。$el

。

class Count extends Backbone.Model

      #defaults: counter : 0

      initialize: ->
           @set counter : 0

      change: ->
           @trigger('change') #this lil fella made it work

 $ ->
      class Spinner extends Backbone.View

           el: $('#counterView')

           initialize: =>
                @model = new Count
                @model.bind 'change' , @update
                @update()

           events:
                'click button#incBtn' : 'inc'
                'click button#decBtn' : 'dec'

           inc: =>
                @model.set counter : @model.get('counter') + 1

           dec: =>                    
                @model.set counter : @model.get('counter') - 1

           update: =>                    
                $('#num').html(@model.get 'counter')


           view = new Spinner()