Eventos de backbone não são acionados após atualização dos eventos por meio de busca

Question

Estou usando backbone.marionette e tenho a seguinte combinação CollectionView ItemView:

  PlansListItemView = PlansApp.ItemView.extend
    tagName: "tbody"
    template: "#plansRow"    
    events:
      'click th.expander': 'expandDocuments'

    expandDocuments: (e) =>
      # do stuff

  PlansCollectionView = PlansApp.CollectionView.extend
    tagName: "table"
    itemView: PlansListItemView 

Eu crio a visualização a partir de uma coleção inicial de json incorporada na página.Os eventos no hash de eventos funcionam perfeitamente.

Então, em um evento de alteração suspensa, chamo fetch() na coleção para recuperar uma nova coleção de objetos.O DOM é reconstruído, mas os manipuladores de eventos não são reanexados/

Alguém tem alguma ideia de por que isso pode acontecer?

Answer 1

Embora eu não saiba a causa exata de imediato, há algumas coisas engraçadas em sua configuração que me fazem pensar que podem ser parte do problema.

OBSERVAÇÃO:Estou fazendo algumas suposições ENORMES sobre seu código e modelos, com base no que você postou.Uma série de coisas podem estar acontecendo e tornariam inválido muito do que estou dizendo.Considerando o que você postou, aqui estão minhas idéias sobre como eu organizaria esse código, o que pode ajudar a resolver os problemas que você está vendo.

Saída HTML ruim?

Você configura cada visualização de item como um <tbody> tag, mas parece que você tem alguma <th> tags renderizadas por essa visualização - com base no evento que você configurou, pelo menos.

Isso produzirá HTML inválido, como:

<table>
  <tbody>
    <th></th>
  </tbody>
</table>

É difícil dizer sem ver o modelo para #plansRow, mas eu acho que algo assim resulta disso.

O problema é que as visualizações de coleção não são boas para gerar tabelas.Eles podem gerar linhas dentro de uma tabela perfeitamente e um wrapper de tag de tabela, mas não serão capazes de obter os cabeçalhos, rodapé, corpo ou outras tags da tabela que uma boa estrutura de tabela precisa porque as visualizações de coleção não renderizam um modelo próprios.Eles apenas criam uma tag wrapper e então renderizam cada um dos filhos da coleção.

Para corrigir isso, use um CompositeView que é um CollectionView que também renderiza seu próprio modelo.

Uma estrutura de tabela melhor com visualizações compostas

Uma configuração mais apropriada para construir tabelas com Marionette é usar um CompositeView como pai e fazer com que cada visualização de item renderize um tr marcação.Por exemplo:

RowView = Backbone.Marionette.ItemView.extend({
  template: "#row-template",
  tagName: "tr"
});

TableView = Backbone.Marionette.CompositeView.extend({
  template: "#table-template",
  tagName: "table",

  appendHtml: function(cv, iv){
    cv.$("tbody").append(iv.el);
  }
});

Isto configurará um <table> com a visualização composta.O modelo para essa visão conteria então o apropriado <thead><th>...</th></thead><tbody></tbody> tags para definir a tabela.

A visualização de linha é renderizada como um <tr> tag e preenche todos os dados necessários, incluindo os apropriados <td> Tag.

O appendHtml método na visualização composta lida com a inserção de cada uma das visualizações de item no <tbody> tag da visualização composta pai.

Você pode ver uma versão ao vivo disso neste JSFiddle: http://jsfiddle.net/derickbailey/me4NK/

e uma postagem no blog para acompanhar este e outros usos do CompositeView, aqui: http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/