(⊃｡•́‿•̀｡)⊃━☆ﾟ.*･｡ﾟ The Backbone Framework: http://marionettejs.com
setting an array ov views is 200 000 o/s
and removing by view is 300 000 o/s
`//Marionette.View.js (Extended)
, render: _.wrap(Marionette.View.prototype.render,function(fn){
_.bind(fn,this)(); //binds current views 'this' object to render function of Marionette.view
this.showChildViews(); //shows all child views declared in childViews object of a view.
})
, showChildViews: function()
{
if(!_.isEmpty(this.childViews))
{
var cViews = Object.entries(this.childViews);
_.each(cViews || [], (kvPair) => {
let [region_name,viewFunc] = kvPair;
if( this.getValidRegion(region_name) )
{
var region = this.getValidRegion(region_name)
, view = _.isFunction(viewFunc) && this.isView( viewFunc.call(this) ) ? viewFunc.call(this) : undefined;
if( view )
{
this.showChildView(region,view);
this.childViewInstances.push(view);
}
else
throw new Error('view is not a constructor/function.')
}
else
console.warn(region+' :No such region exists.');
},this);
}
}//Header.View.js
, initialize: function()
{
this.model = new MovieGenres();
this.model.fetch();
this.model.on('change',this.render,this);
}`
in first, i not recommend to monkey patch vendors prototypes
in case of backbone and marionette you can extend base classes with provided extend util
ex
const BaseView = Mn.View.extend({
/* ... overrides and new methods */
})then in your application you can use BaseView instead of Mn.View.
the second thing is i found out dangerous thing in your code.
at least it looks like you not almost understand how prototypes and objects works in js
_.extend(Marionette.View.prototype,{
childViewInstances: [], // this array instance will be shared between all Mn View instances, just because.
// ...
}and i find out that you just push something in that array in some method.
so, i believe this will lead you to some unexpected thing.
there is a initialize method for setup the instance after initialization.
and your childViewInstances should not be a singleton.
so, you should initialize it something like this
Mn.View.extend({
initialize() {
this.childViewInstances = [];
}
});or
Mn.View.extend({
constructor() {
this.childViewInstances = []; // not good, but possible.
Mn.View.apply(this, arguments);
this.childViewInstances = []; // good.
}
});or even better you can make this property lazy, something like this:
Mn.View.extend({
getChildViewInstances() {
this._ensureChildViewInstances();
return this.childViewInstances;
},
addChildViewInstance(view) {
this._ensureChildViewInstances();
this.childViewInstances.push(view);
},
_ensureChildViewInstances() {
if (this.childViewInstances) return;
this.childViewInstances = [];
},
});at this point i am thinking that your issues are because of childViewInstances is a singleton.
try to fix that in first.
- want to automate the initialization and rendering of child views of a view. That's i extnded the prototype object of marionette view,but i didn't know that it will lead me to this type situations.
const SomeView = Mn.View.extend({
myArray: [],
});
const test1 = new SomeView();
test1.myArray.push(1);
const test2 = new SomeView();
test2.myArray.push(2);
console.log(test1.myArray == test2.myArray);
console.log(test1.myArray);
console.log(test2.myArray);childViewInstances prototype property.If you can answer what exactly will be in the console output then ok.
import Backbone from 'backbone';
Marionette.Module(...
You can find a idom renderer here, alongside with example: https://github.com/blikblum/marionette.renderers
Be aware of https://medium.com/@blikblum/an-incremental-death-5e2441e96468