来自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)