[英]Backbone Collection communicating with Backbone Models
我正在嘗試了解在Backbone項目的不同組件之間進行通信的最佳實踐是什么。 我一直在重新實現TodoMVC的Backbone版本,我的問題是從集合對象中刪除模型。
我了解到,只要通過.set()
修改了Backbone模型實例的任何模型屬性,就會觸發更改事件,並且與模型實例關聯的視圖應從模型實例中更改.listenTo()
,然后重新呈現。 但是,在模型與容納模型的集合對象之間進行通信的最佳實踐是什么? 例如, 當從集合對象中刪除模型時,通信應該如何工作?
我的想法是:刪除模型后,我認為模型實例應該發出一個自定義事件,該事件是收集對象正在偵聽並傳遞的。 當收集對象聽到此事件時,應從列表中刪除模型實例(以及與模型相關的所有事件偵聽器),然后整個收集對象應重新呈現自己。 然后,此重新渲染過程將創建一組新的模型和模型視圖。
這是最好的方法嗎? 我很想聽聽您的意見! 對我來說,這種重新渲染的過程確實非常昂貴,因為您必須銷毀現有的DOM元素,刪除它們的事件偵聽器,然后再次重新創建它們。
更新-3/26/2015
為了更加具體,我將包含到目前為止的代碼,並指出我認為我的理解不夠的地方。
檔案結構
館藏
一種。 todoList.coffee
楷模
一種。 待辦事項
意見
一種。 todoView.coffee
b。 todoListView.coffee
咖啡
咖啡
window.app = app = window.app || {}
data = [
{
title: 'Eat dinner',
completed: false
}
{
title: 'Go to gym',
completed: true
}
]
app.todos = data.map (todo) -> new app.Todo todo
app.todoList = new app.TodoList app.todos
app.todoListView = new app.TodoListView
collection: app.todoList
app.$app = $('#todo-app')
$('#todo-app').append app.todoListView.render().el
待辦事項
window.app = app = window.app || {}
app.Todo = Backbone.Model.extend
defaults:
title: ''
completed: false
toggleComplete: ->
this.set 'completed', !this.get 'completed'
todoList.coffee
window.app = app = window.app || {}
app.TodoList = Backbone.Collection.extend
model: app.Todo
initialize: () ->
# This is what I don't like - creating 'remove-todo' event
this.on 'remove-todo', this.removeTodoFromList
removeTodoFromList: (model) ->
this.remove model
getCompleted: ->
this.filter (model) -> model.completed
getNotCompleted: ->
this.filter (model) -> !model.completed
todoView.coffee
window.app = app = window.app || {}
app.TodoView = Backbone.View.extend
tagName: 'li'
events:
'click input' : 'checkComplete'
'click .delete' : 'removeTodo'
checkComplete: (e) ->
this.model.toggleComplete()
removeTodo: (e) ->
# I don't like how the collection is listening for this custom event 'remove-todo'
this.model.trigger 'remove-todo', this.model
initialize: ->
this.listenTo this.model, 'change:completed', () ->
this.render()
render: ->
template = _.template $('#todo-view').html()
this.$el.html template this.model.toJSON()
return this
todoListView.coffee
window.app = app = window.app || {}
app.TodoListView = Backbone.View.extend
tagName: 'ul'
className: 'todo-list'
initialize: ->
this.collection.on 'remove', (() ->
this.resetListView()
this.render()
), this
addOne: (model) ->
todoView = new app.TodoView
model: model
this.$el.append todoView.render().el
resetListView: ->
this.$el.html('')
render: ->
_.each this.collection.models, ((model) -> this.addOne model), this
return this
代碼說明
如您在上面的評論中所見,每當單擊刪除按鈕時,我的todoView都會觸發自定義事件“ remove-todo”。 todoList集合偵聽此事件,並從集合中刪除特定的模型。 由於每當集合刪除模型時都會觸發“刪除”事件,因此todoListView會監聽此“刪除”事件,然后重新渲染。 我覺得我要去某個地方。 有什么建議嗎?
當您談論模型時,您似乎在談論視圖。 從集合中刪除模型時,您不需要自定義事件,則會觸發“刪除”事件。 http://backbonejs.org/#Collection-刪除
如果要刪除相應的視圖,請使用http://backbonejs.org/#View-remove,它將管理DOM和偵聽器。
的角度重新渲染(我不明白你說的是當你談論重新描繪收集什么)可以,如果你聽從收集到“刪除”模式被觸發,否則聽http://backbonejs.org/ #Collection-add或http://backbonejs.org/#Model-hasChanged是您要在模型更改后重新呈現視圖。
希望對您有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.