Backbone“添加”和“更新”事件混乱

时间:2015-10-25 20:38:06

标签: javascript events backbone.js marionette

来自Backbone.js(1.2.3)文档:

  

添加 collection.add(模特,[选项])

     

将一个模型(或一组模型)添加到集合中,触发“添加”   每个模型的事件,以及之后的“更新”事件。

在我的代码中,我想在集合中添加一个新模型(visually a card with an input),然后强制关注创建的卡片的输入。我不确定它是否是正确的方法,但我基本上会听到当模型被添加到集合时触发的事件并触发另一个事件,这有助于从创建模型的视图进行聚焦:

# ItemView
initialize: ->
    App.vent.on "focus:field", =>
        $("div.card:last").addClass("edit")
        @$el.find("input:first").focus()

当我收听update事件时,它按预期工作::last卡(新模型)被选中并且输入被聚焦。

但是当我听到add事件时,initialize函数会在倒数第二个模型上触发,而不是新模型。仍然会创建新模型,但edit类和焦点强制在之前的模型上。

为什么会这样?

我会为此目的使用update事件,但不幸的是,我model.destroy方法也会触发update事件,因此会导致用户界面破坏,如果我通过了{{} 1}} model.destroy总体上发生了不好的事情。有解决方法吗?

相关代码:

silient:true

修改 显然,# CompositeView class List.Models extends App.Views.CompositeView template: "path/to/template" childViewContainer: "div.destination" childView: List.Model events: "click #add-model": "addModel" initialize: -> @listenTo @collection, "update", -> App.vent.trigger "focus:field" addModel: (e) -> @$el.find("#add-model").prop "disabled", true model = App.request "new:model:entity" @collection.add(model) # ItemView class List.Model extends App.Views.ItemView template: "path/to/template" initialize: -> App.vent.on "focus:field", => $("div.card:last").addClass("edit") @$el.find("input:first").focus() add事件之间的区别在于update事件在调用add之后立即触发,但在将新模型插入DOM之前触发,导致{ {1}}选择器指向倒数第二个视图。然而,我不确定,也许更有经验的人可以澄清这是否真实。在为执行App.vent添加超时后,我得出了这个结论:

@collection.add(model)

0 个答案:

没有答案