Backbone нажмите в связи запускает все это события

Question

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

# Collection view: 

class Newgvbtool.Views.ProductTypesIndex extends Backbone.View 

    template: JST['product_types/index'] 

    tagName: 'section' 

    events: -> 
    'click .new-item': @newItem 

    initialize: (options)-> 
    @company_id = options.company_id 

    Newgvbtool.vent.on 'product_types_index:add:model', @addToCollection 
    Newgvbtool.vent.on 'product_types_index:edit:model', @editModel 
    @collection.on 'reset', @render 
    @collection.on 'add', @appendItem 

    render: => 
    $(@el).html @template() 
    @collection.each @appendItem 

    @ 

    newItem: (e) => 
    e.preventDefault() 
    @showForm null 

    showForm: (model) => 
    if @editView? then @editView.remove() 

    @editView = new Newgvbtool.Views.ProductTypeEdit model: model, company_id: @company_id 

    $(@editView.render().el).dialog( 
     show: 
     title: 'Product type' 
     effect: 'drop' 
     direction: "up" 
     hide: "fade" 
     autoOpen: true 
     modal: true 
     draggable: false 
     minWidth: 400 
     height: "auto" 
     resizable: false 
    ) 

    appendItem: (model)=> 
    view = new Newgvbtool.Views.ProductType model: model 
    $('tbody').append(view.render().el) unless $('#product-types tbody').find("tr[data-id=#{model.id}]").length 

    addToCollection: (model) => 
    @collection.update model 
    model.trigger('highlight') 
    $(@editView.el).dialog 'close' 

    editModel: (model) => 
    @showForm model 

# Item view 

class Newgvbtool.Views.ProductType extends Backbone.View 

    template: JST['product_types/product_type'] 
    tagName: 'tr' 

    events: 
    'click .delete-item': 'deleteItem' 
    'click .edit-item': 'editItem' 

    initialize: (options)-> 
    @model.on 'highlight', @highlight 
    @model.on 'change', @render 

    render: => 
    $(@el).attr('data-id', @model.get('id')).html @template(model: @model) 
    @ 

    highlight: => 
    @$('td').effect 'highlight', 1000 

    deleteItem: => 
    if confirm "Are you sure?" 
     @model.destroy wait: true 
     $(@el).remove() 

    editItem: => 
    Newgvbtool.vent.trigger "product_types_index:edit:model", @model 

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

%td 
    = @model.get 'name' 
%td 
    = @model.get 'description' 
%td.opts 
    %a.edit-item{ href: '#' } 
    %span.icon-edit 
    %a.delete-item{ href: '#' } 
    %span.icon-remove-sign 

Дело в том, что каждый раз, когда вы нажимаете элемент, запускаются как события редактирования, так и удаления элементов.

Что я делаю неправильно?

Заранее благодарен!

Answer 1

Ошибка была в том, как я добавлял представления элементов в представление коллекции.

Я делаю это так:

$('tbody').append(view.render().el) 

И не получал право ссылки на делегирование событий, поэтому я просто добавил @ (или это), и теперь он работает как шарм

@$('tbody').append(view.render().el)