I am currently trying to put a backbone model inside an already existing model. I was wondering if this is even possible.
var rf = this.collection.create(attrs, options);
Model.set(table, rf);
Thanks
What you trying to do is "Nested Models & Collections". Backbone already has preferable approach. The common idea consist in storing of nested model directly in the instance of another model instead attributes.
So, you could create child model first and then pass it to parent model through options like the following:
var rf = this.collection.create(attrs, options);
var Model = Backbone.Model.extend({
initialize: function(attributes, options) {
_.isObject(options) || (options = {});
if (options.child) {
this.child = new options.child;
}
}
});
var model = new Model({}, {child: rf});
If you want to get a fully supported tree-like Backbone models you could try to use one of the following plugins.
Hope this helps!
Related
Is there a clean way to change the model of a Backbone collection at runtime? In other words, I have a collection called BaseCollection where by default its model is called BaseModel. The model acts as a base class for other models. Say AModel, BModel, etc.
Now during runtime the collection, based on specific params, needs to understand if it have to call the parse method (with a specific override) of the BaseModel or one of the parse methods used in models that extend from BaseModel.
Normally, this could achieved simply extending the collection each time I instantiate it. So, for example, by default is the defined as follow.
var BaseCollection = Backbone.Collection.extend({
model : BaseModel,
// other stuff here
});
Now if I want to have a collection where AModel has to be the model
BaseCollection.extend( { model: AModel } );
Here the complicated stuff. What if the collection does not contain model of the same type. In other words, what if the BaseCollection contains AModels, BModels, etc? Note that I need to call the parse method for each model, since they differ a little bit.
The magic of creating a collection of different models is by implementing a model function.
here is the examples from http://backbonejs.org/#Collection-model
var Library = Backbone.Collection.extend({
model: function(attrs, options) {
if (condition) {
return new PublicDocument(attrs, options);
} else {
return new PrivateDocument(attrs, options);
}
}
});
in your case you should use the attributes to decide which model you want to create
Here I am passing a model to a Backbone view.
view = new View ({model:{item:4,name:"Ipad"}});
When I console.log that model from within the View. I get:
Object {item: 4, title: "Ipad"}
This is not a backbone model therefore I don't have methods
like toJSON. I realize that if I define a Backbone model and
passed it in everything works fine.
view = new GenreView ({model:new Model({title: 4, title: "Ipad"})});
This logs
r {cid: "c2", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}
Why is it that first approach doesn't work and how can I fix it?
Its simply that the special 'model' option expects a Backbone.Model not a javascript object.
So you are correct when you create a new Backbone.Model to pass into the view.
There is nothing to fix as far as I can tell.
You need to use a Backbone.Model instead of a regular JavaScript object {}
var Item = Backbone.Model.extend({
// ...
});
Instantiate the Item model
var myItem = new Item();
Now use your item in the view
var myView = new View({model: myItem});
This answer assumes that View is setup as something like
var View = Backbone.View.extends({
// ...
});
You could cast the object to a Backbone Model in your view's initialize method:
var View = Backbone.View.extend({
initialize: function(options){
if (_.isPlainObject(this.model)) {
this.model = new Backbone.Model(this.model);
}
}
});
This way the view will be able to operate on it's model regardless of whether you passed it an instance of a Backbone.Model or a plain object. You can see an example of it working here: http://jsbin.com/igecEgE/1/edit?js,console
So I have some objects extended from Backbone.js:
var MyModel = Backbone.Model.extend({});
var modelInstance = new MyModel();
var MyModelView = Backbone.View.extend({});
And I'm trying to figure out how to bind my Model to its corresponding View. How does one handle data-binding in Backbone?
You pass your model instance into the view when creating it.
var modelView = new MyModelView({model: modelInstance})
From the docs:
When creating a new View, the options you pass — after being merged into any default
options already present on the view — are attached to the view as this.options
for future reference. There are several special options that, if passed, will be
attached directly to the view: model, collection, el, id, className, tagName and attributes.
So I'm using Backbone for my web application and I'm having trouble figuring out how to work with nested models. I have a model based on a java class whos JSON would look something like this:
"AdminSettings":
{
"defaults": {
"deletable":true,
"transferable":false;
"issueLimit":1
}
"displaySettings": {
"tabs":2,
"amounts:[10,20]
}
}
Currently, I have an endpoint set up and a backbone model for the AdminSettings object. I was wondering if there was a specific way to get all the backbone benefits for the objects inside AdminSettings. For example, currently I have to use:
adminSettings.get("defaultValues").shareable
But I want to use:
adminSettings.get("defaultValues").get("shareable")
This isn't the only benefit I'm trying to obtain, just an example.
So yeah, what would be a good way to go about this. I was thinking making a backbone model for each one of the nested objects and setting up endpoints for each one of those, but I'm not completely sure. Anyways, thanks for looking.
You could write your own custom backbone parser:
var DisplaySettingsModel = Backbone.Model.extend({});
var DefaultValuesModel = Backbone.Model.extend({});
var AdminSettingsModel = Backbone.Model.extend({
model: {
defaultValues: DefaultValuesModel
displaySettings: DisplaySettingsModel
},
parse: function(response){
response["defaultValues"] = new DefaultValuesModel(response["defaultValues"], {parse:true});
response["displaySettings"] = new DisplaySettingsModel(response["displaySettings"], {parse:true});
return response;
}
});
I am learning Backbone.
I am wondering whether or not a Backbone View always requires a Backbone Model.
For example, let's say I have a panel that contains two child panels. The way I would structure this is with a parent view for the main panel, then two child views for the child panels...
var OuterPanel = Backbone.View.extend({
initialize: function() {
this.innerPanelA = new InnerPanelA(innerPanelAModel);
this.innerPanelB = new InnerPanelB(innerPanelBModel);
},
});
var outerPanel = new OuterPanel();
The parent view is really just a container. It may have some controls in it, but no data that needs to be persisted. Is this the proper way to do it? Or is this bad practice?
Thnx (in advance) for your help
As said in Backbone.View docs
Backbone views are almost more convention than they are code — they
don't determine anything about your HTML or CSS for you, and can be
used with any JavaScript templating library.
In other words, if you don't have a model, don't use a model. On the other hand, I would inject the children models as options to the outer view instance and not rely on global variables, something like this:
var OuterPanel = Backbone.View.extend({
initialize: function(options) {
this.innerPanelA = new InnerPanelA({model: options.modelA});
this.innerPanelB = new InnerPanelB({model: options.modelB});
}
});
var outerPanel = new OuterPanel({
modelA: innerPanelAModel,
modelB: innerPanelBModel
});