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$(function(){
Pautado.Collections.NavTabs = Backbone.Collection.extend({
model: Pautado.Models.NavTab
});
});
navTab.Model.js
Código Javascript
:
Ver original$(function(){
Pautado.Models.NavTab = Backbone.Model.extend({
defaults: {
ClassStatus: "",
esBtnAbrirCanales: false,
esBtnAbrirComercializacion: false,
ID: "",
Nombre: "",
tablaAsociada: "",
tabContentAsociado: ""
}
});
});
navTab.View.js
Código Javascript
:
Ver original$(function(){
Pautado.Views.NavTab = Backbone.View.extend({
abrir: function (e) {
e.preventDefault();
e.stopPropagation();
var $li = $(e.currentTarget);
var $ul = $li.parent();
$li.css("display", "none");
if ($("li:visible", $ul).size() == 0) {
$("li.seccionesAbiertas", $ul).css("display", "block");
}
this.vent.trigger("agregarNuevoTabContent", $li.attr("data-idSeccion"));
var newNavTab = new Pautado.Models.NavTab({
ClassStatus: "active",
ID: $li.attr("data-idSeccion"),
Nombre: $li.attr("data-seccion"),
});
Pautado.Variables.navTabsCanales.add(newNavTab);
$ul.parent().removeClass("open");
},
attributes: function () {
return {
"class": this.model.get('ClassStatus') + ((this.model.get('esBtnAbrirCanal')) ? " dropdown" : " esNavTab"),
"data-idSeccion": this.model.get('ID')
}
},
cerrar: function (e) {
e.stopPropagation();
var $li = $(e.delegateTarget);
var $liNext = $li.next();
var $liPrev = $li.prev();
if ($liNext.length > 0) {
$liNext.addClass("active");
$("#tabContent-" + $liNext.attr("data-idSeccion"), this.model.get("tabContentAsociado").$el).addClass("active");
}
else if ($liPrev.length > 0) {
$liPrev.addClass("active");
$("#tabContent-" + $liPrev.attr("data-idSeccion"), this.model.get("tabContentAsociado").$el).addClass("active");
}
else {
this.model.get("tabContentAsociado").$el.first().addClass("active");
}
var $ulDropDown = $(".dropdown-menu", $li.parent());
$("#seccion-" + this.model.get('ID'), $ulDropDown).css("display", "block");
$("li.seccionesAbiertas", $ulDropDown).css("display", "none");
$("#tabContent-" + this.model.get('ID'), this.model.get("tabContentAsociado").$el).remove();
this.model.get('tablaAsociada').model.destroy();
this.model.destroy();
Pautado.Functions.deleteView(this.model.get('tablaAsociada'));
Pautado.Functions.deleteView(this);
},
events: {
"click ul > li.esAbrirSeccion": "abrir",
"click .glyphicon-remove": "cerrar"
},
initialize: function (options) {
this.vent = options.vent;
this.render();
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
tagName: "li",
template: template("pautado-navTab-template")
});
Pautado.Views.NavTabs = Backbone.View.extend({
agregaNavTab: function (m) {
var navTab = new Pautado.Views.NavTab({ model: m, vent: vents });
$("li.active", this.$el).removeClass("active");
// Se inserta dentro de tag el nuevo li NavTab.
this.$el.append(navTab.el);
},
className: "nav nav-tabs",
events: {
"click li.esNavTab": "mostrarBotones",
"mouseenter li.active.esNavTab": "mostrarBotones",
"mouseleave li.active.esNavTab": "ocultarBotones"
},
initialize: function (options) {
this.listenTo(this.collection, "add", this.agregaNavTab);
this.render();
},
mostrarBotones: function (e) {
var $li = $(e.currentTarget);
$(".botonesAcciones", $li).css("display", "block");
},
ocultarBotones: function (e) {
var $li = $(e.currentTarget);
$(".botonesAcciones", $li).css("display", "none");
},
render: function () {
this.collection.each(this.agregaNavTab, this);
$(this.$el.attr('data-elementInsert')).append(this.el);
return this;
},
tagName: "ul"
});
});
app.js
Código Javascript
:
Ver originalvar vents = _.extend({}, Backbone.Events);
var navTabsCanales = new Pautado.Views.NavTabs(
{
collection: Pautado.Variables.navTabsCanales,
attributes: {
"data-elementInsert": ".containerNavTabsCanales",
"role": "tablist"
},
vent: vents
}
);
var navTabsComercializacion = new Pautado.Views.NavTabs(
{
collection: new Pautado.Collections.NavTabs([
{
ID: "comercializacion",
esBtnAbrirComercializacion: true,
Nombre: "",
ClassStatus: "active",
tabContentAsociado: tabContentsComercializacion
}
]),
attributes: {
"data-elementInsert": ".containerNavTabsComercializacion",
"role": "tablist"
},
vent: vents
}
);
Gracias de antemano.