Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/11/2014, 17:03
kriss8725
 
Fecha de Ingreso: mayo-2009
Mensajes: 242
Antigüedad: 15 años
Puntos: 2
Pregunta Varias colecciones en backbone con eventos independientes

Buen día, tengo un duda en cuanto a las colecciones de backbonejs:

Cuando creo dos nuevas instancias de la view Pautado.Views.NavTabs cada una con su respectiva coleccion, al momento de lazar el evento mediante this.vent.trigger("agregarNuevoTabContent", $li.attr("data-idSeccion"));, este evento se ejecuta dos veces como puedo separar los eventos para cada coleccion de cada instancia de la view.

Tengo los siguientes archivos:

navTabs.Collection.js
Código Javascript:
Ver original
  1. $(function(){
  2.    Pautado.Collections.NavTabs = Backbone.Collection.extend({
  3.         model: Pautado.Models.NavTab
  4.  
  5.     });
  6. });

navTab.Model.js
Código Javascript:
Ver original
  1. $(function(){
  2. Pautado.Models.NavTab = Backbone.Model.extend({
  3.         defaults: {
  4.  
  5.             ClassStatus: "",
  6.             esBtnAbrirCanales: false,
  7.             esBtnAbrirComercializacion: false,
  8.             ID: "",
  9.             Nombre: "",
  10.             tablaAsociada: "",
  11.             tabContentAsociado: ""
  12.         }
  13.     });
  14. });

navTab.View.js
Código Javascript:
Ver original
  1. $(function(){
  2.  
  3. Pautado.Views.NavTab = Backbone.View.extend({
  4.  
  5.         abrir: function (e) {
  6.  
  7.             e.preventDefault();
  8.  
  9.             e.stopPropagation();
  10.  
  11.             var $li = $(e.currentTarget);
  12.  
  13.             var $ul = $li.parent();
  14.  
  15.             $li.css("display", "none");
  16.  
  17.             if ($("li:visible", $ul).size() == 0) {
  18.                 $("li.seccionesAbiertas", $ul).css("display", "block");
  19.             }
  20.  
  21.             this.vent.trigger("agregarNuevoTabContent", $li.attr("data-idSeccion"));
  22.            
  23.             var newNavTab = new Pautado.Models.NavTab({
  24.                                     ClassStatus: "active",
  25.                                     ID: $li.attr("data-idSeccion"),
  26.                                     Nombre: $li.attr("data-seccion"),
  27.                                  });
  28.             Pautado.Variables.navTabsCanales.add(newNavTab);
  29.  
  30.             $ul.parent().removeClass("open");
  31.  
  32.         },
  33.        
  34.         attributes: function () {
  35.  
  36.             return {
  37.  
  38.                 "class": this.model.get('ClassStatus') + ((this.model.get('esBtnAbrirCanal')) ? " dropdown" : " esNavTab"),
  39.                 "data-idSeccion": this.model.get('ID')
  40.  
  41.             }
  42.  
  43.         },
  44.         cerrar: function (e) {
  45.  
  46.             e.stopPropagation();
  47.  
  48.             var $li = $(e.delegateTarget);
  49.  
  50.             var $liNext = $li.next();
  51.  
  52.             var $liPrev = $li.prev();
  53.  
  54.             if ($liNext.length > 0) {
  55.  
  56.                 $liNext.addClass("active");
  57.  
  58.                 $("#tabContent-" + $liNext.attr("data-idSeccion"), this.model.get("tabContentAsociado").$el).addClass("active");
  59.  
  60.             }
  61.             else if ($liPrev.length > 0) {
  62.  
  63.                 $liPrev.addClass("active");
  64.  
  65.                 $("#tabContent-" + $liPrev.attr("data-idSeccion"), this.model.get("tabContentAsociado").$el).addClass("active");
  66.  
  67.             }
  68.             else {
  69.  
  70.                 this.model.get("tabContentAsociado").$el.first().addClass("active");
  71.  
  72.             }
  73.  
  74.             var $ulDropDown = $(".dropdown-menu", $li.parent());
  75.  
  76.             $("#seccion-" + this.model.get('ID'), $ulDropDown).css("display", "block");
  77.  
  78.             $("li.seccionesAbiertas", $ulDropDown).css("display", "none");
  79.  
  80.             $("#tabContent-" + this.model.get('ID'), this.model.get("tabContentAsociado").$el).remove();
  81.  
  82.             this.model.get('tablaAsociada').model.destroy();
  83.  
  84.             this.model.destroy();
  85.  
  86.             Pautado.Functions.deleteView(this.model.get('tablaAsociada'));
  87.  
  88.             Pautado.Functions.deleteView(this);
  89.  
  90.         },
  91.         events: {
  92.             "click ul > li.esAbrirSeccion": "abrir",
  93.             "click .glyphicon-remove": "cerrar"
  94.         },
  95.         initialize: function (options) {
  96.            
  97.             this.vent = options.vent;
  98.            
  99.             this.render();
  100.  
  101.         },
  102.         render: function () {
  103.  
  104.             this.$el.html(this.template(this.model.toJSON()));
  105.  
  106.             return this;
  107.         },
  108.         tagName: "li",
  109.         template: template("pautado-navTab-template")
  110.  
  111.     });
  112.  
  113. Pautado.Views.NavTabs = Backbone.View.extend({
  114.  
  115.         agregaNavTab: function (m) {
  116.  
  117.             var navTab = new Pautado.Views.NavTab({ model: m, vent: vents });
  118.  
  119.             $("li.active", this.$el).removeClass("active");
  120.  
  121.             // Se inserta dentro de tag el nuevo li NavTab.
  122.             this.$el.append(navTab.el);
  123.  
  124.         },
  125.         className: "nav nav-tabs",
  126.         events: {
  127.             "click li.esNavTab": "mostrarBotones",
  128.             "mouseenter li.active.esNavTab": "mostrarBotones",
  129.             "mouseleave li.active.esNavTab": "ocultarBotones"
  130.         },
  131.         initialize: function (options) {
  132.  
  133.             this.listenTo(this.collection, "add", this.agregaNavTab);
  134.            
  135.             this.render();
  136.  
  137.         },
  138.         mostrarBotones: function (e) {
  139.  
  140.             var $li = $(e.currentTarget);
  141.  
  142.             $(".botonesAcciones", $li).css("display", "block");
  143.  
  144.         },
  145.         ocultarBotones: function (e) {
  146.  
  147.             var $li = $(e.currentTarget);
  148.  
  149.             $(".botonesAcciones", $li).css("display", "none");
  150.  
  151.         },
  152.         render: function () {
  153.  
  154.             this.collection.each(this.agregaNavTab, this);
  155.  
  156.             $(this.$el.attr('data-elementInsert')).append(this.el);
  157.  
  158.             return this;
  159.  
  160.         },
  161.         tagName: "ul"
  162.  
  163.     });
  164. });

app.js
Código Javascript:
Ver original
  1. var vents = _.extend({}, Backbone.Events);
  2.  
  3.           var navTabsCanales = new Pautado.Views.NavTabs(
  4.                     {
  5.                         collection: Pautado.Variables.navTabsCanales,
  6.                         attributes: {
  7.  
  8.                             "data-elementInsert": ".containerNavTabsCanales",
  9.                             "role": "tablist"
  10.  
  11.                         },
  12.                         vent: vents
  13.                     }
  14.                 );
  15.  
  16.            var navTabsComercializacion = new Pautado.Views.NavTabs(
  17.                 {
  18.                     collection: new Pautado.Collections.NavTabs([
  19.                                 {
  20.  
  21.                                     ID: "comercializacion",
  22.                                     esBtnAbrirComercializacion: true,
  23.                                     Nombre: "",
  24.                                     ClassStatus: "active",
  25.                                     tabContentAsociado: tabContentsComercializacion
  26.  
  27.                                 }
  28.                     ]),
  29.                     attributes: {
  30.  
  31.                         "data-elementInsert": ".containerNavTabsComercializacion",
  32.                         "role": "tablist"
  33.  
  34.                     },
  35.                     vent: vents
  36.                 }
  37.             );

Gracias de antemano.