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

Question

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

我的模型有一个变量'counter'.View有2个按钮,可以增加或减少模型的"计数器".简单的东西.这一切都很好,但是当我尝试在视图中监听模型更改事件时,我只会在模型创建时收到通知(创建默认值时,我会假设).

我知道计数器正在更新,因为如果我在更新模型后手动调用渲染我可以看到效果,但为了更好的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:

<body>
    <div id="counterView">
        <button id="incBtn">Increment</button>
        <button id="decBtn">Decrement</button>
    <div id="num">Number</div>
    </div>    
</body>

提前致谢.b

Answer 1

你的错误在这里:

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

你要告诉它的是将change事件绑定到@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)