I am implementing a system where I manage view switching in order to clear any events carried by that view before rendering another. However, I need to look up the view in an array using an instance of the view. How can I get the view class of a view instance?
eg:
var myView = new MyView;
return myView.parent(); // this should return MyView
Thanks!
Sounds like you're looking for the constructor property:
Returns a reference to the Object function that created the instance's prototype.
So if you do this:
var v = new View;
then v.constructor will be View. And if you do this:
var views = [
Backbone.View.extend({}),
Backbone.View.extend({}),
Backbone.View.extend({})
];
var v = new views[1];
for(var i = 0; i < views.length; ++i)
if(v.constructor === views[i])
console.log(i)
You'll get 1 in the console. Demo: http://jsfiddle.net/ambiguous/EgURK/
The way I solve this is to pass in this as part of the constructor and set an "instance variable" inside of the view.
You'd then wire up a getter function with the name "parent" to return it a la your example code:
var myView = new MyView( this );
return myView.parent();
Related
This question already has an answer here:
Backbone View extends is polluted
(1 answer)
Closed 8 years ago.
I spent a lot of time trying to catch a bug in my app. Eventually I set apart this piece of code which behavior seems very strange to me.
var Model = Backbone.Model.extend({
myProperty: []
});
var one = new Model();
var two = new Model();
one.myProperty.push(1);
console.log(two.myProperty); //1!!
What's the reason behind it? Why it acts so? How to avoid this type of bugs in code?
Inheritance in JavaScript is prototypical - objects can refer directly to properties higher up in the prototype chain.
In your example, one and two both share a common prototype, and do not provide their own values for myProperty so they both refer directly to Model.protoype.myProperty.
You should create new myProperty array for each model you instantiate. Model.initialize is the idiomatic place for this kind of initialisation - overriding constructor is unnecessarily complex.
var Model = Backbone.Model.extend({
initialize: function() {
this.myProperty = [];
}
});
Alternatively you could make myProperty as an attribute of the model:
var Model = Backbone.Model.extend({
defaults: function() {
return {
myProperty: []
}
}
});
It is important to note that defaults is a function - if you were to use a simple object you would encounter the same shared reference issue.
Actually its because myProperty is an array, and as you know arrays will be stored by reference. Just to test consider the following code:
var Model = Backbone.Model.extend({
myProperty: [],
messege: ''
});
var one = new Model();
var two = new Model();
one.messege = 'One!';
two.messege = 'Two!';
console.log(one.messege ); // 'One!'
console.log(two.messege ); // 'Two!'
An alternative around this could be:
var Model = Backbone.Model.extend({
constructor: function() {
this.myProperty = [];
Backbone.Model.apply(this);
}
});
var one = new Model();
one.myProperty.push(1);
var two = new Model();
console.log(two.myProperty); // []
The documentation says:
constructor / initialize new Model([attributes], [options])
When creating an instance of a model, you can pass in the initial values of the attributes, which will be set on the model. If you define an initialize function, it will be invoked when the model is created.
In rare cases, if you're looking to get fancy, you may want to override constructor, which allows you to replace the actual constructor function for your model.
So, following the documentation, you'd want to do something like this to get your case running:
var Model = Backbone.Model.extend({
initialize: function() {
this.myProperty = [];
}
});
source: http://backbonejs.org/#Model-extend
/**
* adds an entry to the list
*
* #param data {Object}
* #return this
*/
ElementList.prototype.addEntry = function(data){
if (!data) return this;
data['type'] = this.children_type;
// add the entry to the current elements
this.element_list.push(new FavoriteEntry(data));
this.refresh();
return this;
};
/**
* favorites extend ElementList
*
* #param setting_list
* #constructor
*/
function FavoriteList(setting_list){
ElementList.call(this, setting_list);
}
FavoriteList.prototype = new ElementList();
FavoriteList.constructor = FavoriteList;
So this a short code snipplet of an educational project of mine.
What I want to do is reduce repeating code so I created a generic ElementList object
So
the Example FavoriteList inherties the parent Objects prototype
The constructors is pointing to the Childobject
the Parent constructor is called within the child.
That works just perfectly fine my problem is
// add the entry to the current elements
this.element_list.push(new FavoriteEntry(data));
This should create a new instance of an Object BASED on the CHILD so therefore I need to get the name of the child instance that's calling the parent method
i tried
- this.constructor (point to the parent)
- this.constructor.name
- this instanceof FavoriteList (works)
since I DON'T want to pass a name and i think iterating through instanceof "options" is not really smart.
I would ask for some insights how I can access the childs instance name in the parent elements method body.
Please I only need an explicit answer to this!! I already read workarounds! If It's not possible just say so :)
thx in advance :)
this.element_list.push(new FavoriteEntry(data));
This should create a new instance of an Object BASED on the CHILD so
therefore I need to get the name of the child instance that's calling
the parent method
No, you don't seem to need to know the name. All you need is a helper function to generate new Entry instances, that can be overwritten to generate more specific entries. Maybe you're already doing that by passing a children_type with the data…
i tried - this.constructor (point to the parent)
It should work if you had set the constructor correctly. Change your code to
FavoriteList.prototype.constructor = FavoriteList;
// ^^^^^^^^^^
Also, you might want to use Object.create instead of new to set up the prototype chain.
I'm not sure if I fully understand but the code new FaforiteEntry should create either a FororiteEntry or another type based on the current object type.
Maybe the following example could help you out:
var ElementList = function(args) {
this.element_list = [];
}
ElementList.prototype.addEntry = function(args) {
this.element_list.push(new this.entryType(args.val));
};
//will create element_list items of type String
ElementList.prototype.entryType = String;
function FavoriteList(args) {
ElementList.call(this, args);
}
FavoriteList.prototype = Object.create(ElementList.prototype);
FavoriteList.constructor = FavoriteList;
//will create element_list items of type Array
FavoriteList.prototype.entryType = Array;
//adding entries to f would create items of type Array
var f = new FavoriteList();
f.addEntry({val: 2});
console.log(f.element_list);//[[undefined, undefined]]
//adding entries to e would create items of type String
var e = new ElementList();
e.addEntry({val: 2});
console.log(e.element_list);//[ String { 0="2"...
Simple code example:
function Parent(){
// custom properties
}
Parent.prototype.getInstanceName = function(){
for (var instance in window){
if (window[instance] === this){
return instance;
}
}
};
var child = new Parent();
console.log(child.getInstanceName()); // outputs: "child"
I'm creating a visual builder using different view for each component. All the view are declared like below:
$(function() {
var parallaxView = new Backbone.view.extend({
....
});
var parallaxView = new Backbone.view.extend({
....
});
});
At one point i start to create a new object view from that view. But all i know is the string represent the name of the view store in an object
name
My question can we create an object in some way such as new class using that object value as class name.
var myView = new name(param1, param2);
instead of using
switch (name) {
case 1:
....
}
I have try this case
var myView = new name(param1, param2);
and i know that it won't wok. But is there any way to can create an object in someway like that?
If I understand your question in a right way, you can store views constructors in object like this:
$(function() {
window.views = {
'parallax': Backbone.View.extend({ /*...*/ }),
'test': Backbone.View.extend({ /*...*/ })
};
});
Then you can create instances this way:
// var name = 'parallax';
var myView = new window.views[name](param1, param2);
Please let me know if your problem is not like I understand it.
I have tried the following to set an id to my model:
var globalCounter = 1;
var Model = Backbone.Model.extend({
initialize: function () {
this.id = globalCounter;
globalCounter += 1;
}
});
myModel = new Model();
console.log(myMode.get('id')); // prints undefined
How can I set an id to my models?
You need to use the set() function instead (http://jsbin.com/agosub/1/);
var globalCounter = 1;
var Model = Backbone.Model.extend({
initialize: function () {
this.set('id', globalCounter);
globalCounter += 1;
}
});
myModel = new Model();
console.log(myModel.get('id')); // prints 1
You must use :
this.set('id', globalCounter);
instead of this.id = globalCounter;
You are adding the id value to the Model object, but you want to add it to Model.attributes object. And that what is doing Model.set() method.
model.set("key", value) will put the value in model.attributes.key;
model.get("key") will return the value inside model.attributes.key
This is a little weird for new comers to Backbone, but it's a major (and easy) point to get. It's designed so that using model.set(...) will fire change events you can easily catch to update your views.
Backbone and ES6 Update :
The Backbone attribute object is outdates by ES6 getters and setters. Theses functions can overwrite the standard access.
Warning : this is pseudo-code that may be one day used with ES6 !
class MyModel extends Backbone.Model{
get id(){ return this.attributes.id; }
set id(id){ this.attributes.id = id; }
}
This would allow to write :
let myModel = new Model();
myModel.id = 13; // will use myModel.id(13)
console.log (myModel.id); // will show myModel.id()
As of today, this is only a dream of a Backbone 2. After basic searches, I've seen nothing about that coming.
This is a general question about backbone.js and javascript, I'm intermediate in javascript:
If you have a collection of models, each connected to an instance of a view, is each model instance's view instance containing a full instance of the view's render method? If so, what is recommended way to ensure that the render method is 'static', so that memory is not wasted if each model instance requires the exact same render function?
In the example below, does each hat instance also contain an instance of the render function, or is it pointing to a 'static' render function?
var Hat = Backbone.Model.extend({});
var HatCollection = Backbone.Collection.extend({
model : Hat,
});
var HatView = Backbone.View.extend({
render : function() {
// output the hat's html
}
});
var hats = new HatCollection([ new Hat(), new Hat(), new Hat()])
hats.each(function(hat) {
hat.view = new HatView({ model : hat });
});
There are no real "static" or "class" methods in Javascript. What you have is a method defined on the class's prototype.
When you use Backbone.View.extend(), everything you pass is added to the prototype, so they are indeed what you would call "static" methods.
Just check if the render method is a member of the instance or the prototype:
(function () {
var HatView = Backbone.View.extend({
render : function() {
console.log("rendering a hat...");
}
});
var hview = new HatView();
console.log(hview.hasOwnProperty("render")); // false
console.log(hview.render === HatView.prototype.render); // true
}());