Удаление нескольких видов после удаления модели - PullRequest
Новая
       2

Удаление нескольких видов после удаления модели

3 голосов
/ 07 февраля 2012

Мое приложение структурировано так: есть боковая панель, которая содержит много элементов и генерируется SidebarView. SidebarView вызывает ItemView для каждого элемента на боковой панели: 

render: ->
  view = new ItemView({model: the_item})
  $(@el).append(view.render().el)

Тогда есть ShowView, который отображает элемент в главном div. Также есть кнопка, которая используется для удаления элемента. 

events:
  "click #destroy-button" : "destroy"

destroy: () ->
  @model.destroy()
  this.remove()

  return false

Удаляет ShowView из дерева DOM и отправляет запрос DELETE на сервер. Но каков наилучший способ удалить ItemView с боковой панели? Добавлять идентификаторы типа <div class="item" data-index="123"></div>, а затем удалять элементы через индекс данных? Я видел, как кто-то использовал jQuery.data для привязки данных к дереву DOM. Но оба решения выглядят немного вонючими. Есть ли элегантный способ сделать это?

1 Ответ

5 голосов
/ 07 февраля 2012

Ваш ItemView должен обрабатывать кнопку «удалить». Последовательность выглядит следующим образом:

  1. Вы нажали кнопку удалить .
  2. Это вызывает событие в соответствующем ItemView.
  3. ItemView уничтожает модель.
  4. Уничтожение модели вызывает событие 'destroy' из модели.
  5. ItemView прослушивает событие 'destroy' и удаляет себя, когда это происходит.

Итак, ваш ItemView будет выглядеть примерно так: 

class ItemView extends Backbone.View
    events:
        'click .del': -> @model.destroy()
    initialize: ->
        @model.on('destroy', @remove)
    render: ->
        # ...
        @
    remove: =>
        $(@el).remove()
        # And whatever other cleanup tasks you have...

Таким образом, ваши взгляды будут реагировать соответствующим образом, если одна из ваших моделей Предметов будет уничтожена кем-то другим.

Демо: http://jsfiddle.net/ambiguous/KMT74/1/

И если кто-то еще визуализирует кнопку удаления, вам просто нужно вызвать destroy для соответствующего экземпляра модели, и ItemView сам удалится. См. Пример kill first в демоверсии. Вы можете использовать атрибут data-id в ItemView el, чтобы связать модели с их представлениями, а затем сделать что-то вроде: 

your_destroy_button_handler: (ev) ->
    item = @collection.get($(ev.target).data('id'))
    item.destroy()

но для ItemView будет понятнее отобразить собственную кнопку удаления.

Также это: 

events:
  "click #destroy-button" : "destroy"

будет проблемой, так как у вас будут дубликаты id атрибутов, вместо этого используйте класс для кнопки: 

events:
  "click .destroy-button" : "destroy"
...