簡體   English   中英

骨干集合與骨干模型通信

[英]Backbone Collection communicating with Backbone Models

我正在嘗試了解在Backbone項目的不同組件之間進行通信的最佳實踐是什么。 我一直在重新實現TodoMVC的Backbone版本,我的問題是從集合對象中刪除模型。

我了解到,只要通過.set()修改了Backbone模型實例的任何模型屬性,就會觸發更改事件,並且與模型實例關聯的視圖應從模型實例中更改.listenTo() ,然后重新呈現。 但是,在模型與容納模型的集合對象之間進行通信的最佳實踐是什么? 例如, 當從集合對象中刪除模型時,通信應該如何工作?

我的想法是:刪除模型后,我認為模型實例應該發出一個自定義事件,該事件是收集對象正在偵聽並傳遞的。 當收集對象聽到此事件時,應從列表中刪除模型實例(以及與模型相關的所有事件偵聽器),然后整個收集對象應重新呈現自己。 然后,此重新渲染過程將創建一組新的模型和模型視圖。

這是最好的方法嗎? 我很想聽聽您的意見! 對我來說,這種重新渲染的過程確實非常昂貴,因為您必須銷毀現有的DOM元素,刪除它們的事件偵聽器,然后再次重新創建它們。

更新-3/26/2015

為了更加具體,我將包含到目前為止的代碼,並指出我認為我的理解不夠的地方。

檔案結構

  1. 館藏

    一種。 todoList.coffee

  2. 楷模

    一種。 待辦事項

  3. 意見

    一種。 todoView.coffee

    b。 todoListView.coffee

  4. 咖啡

咖啡

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-addhttp://backbonejs.org/#Model-hasChanged是您要在模型更改后重新呈現視圖。

希望對您有所幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM