i'm trying to create a Tree with backbone.js models, but i'm having a problem with it:
Collection: MCollection:
define
(
['backbone', 'models/M'],
function(Backbone, M)
{
'use strict';
return Backbone.Collection.extend
(
{
model: M,
}
}
);
}
);
and the model that has a collection that depends on that model...
Model: M
define
(
['backbone', 'underscore', 'vent', 'collections/MCollection'],
function(Backbone, _, vent, MCollection)
{
'use strict';
return Backbone.Model.extend
(
{
_children : null,
initialize : function(attributes, options)
{
this._children = new MCollection();
},
}
);
}
);
so what is happening.. I load the model M, but in the model i'm also creating a collection which has as model: M, so it depends on each other.. as a result the model of MCollection remains undefined, while it should be referrering to M.
I tried thinking how i can fix this but i can't find a way to do this.. Do you?
Circular dependencies are usually a sign of bad design. I recommend that you rethink this problem and try to solve it some other way. For example, do you need to create models using the collection? You only need the model field in a collection if you want to be able to pass arbitrary objects and have them instantiated as models. If you always add M models to the collection, you wont need to reference it in the collection.
Related
I am new to backbone.js and I am trying to learn it. In the code below I want my collection called "JokesCollection" to only accept adding models of the class "Joke". How do I do achieve this? When setting "Collection" attribute "model" to a certain model, isn´t the collection supposed to only accept that model class and ensure homogeneity? Don´t seam so. When I assign attribute "model" in the "JokesCollection" class to "Joke" it still accepts adding models of class "Persson" witch is not what I want. I only want it to accept adding models of class "Joke".
Joke = Backbone.Model.extend ({
initialize: function(){
console.log("Joke was created");
},
defaults: {
joke : "",
date : "0",
}
});
JokesCollection = Backbone.Collection.extend({
initialize: function(){
console.log("JokesCollection was created");
},
model: Joke // <=== Isn´t this supposed to ensure that the collection only accepts models of class "Joke"?
});
Person = Backbone.Model.extend ({
initialize: function(){
console.log("Person was created");
},
defaults: {
username: "default",
password: "default",
email: "default"
}
});
var person1 = new Person({username:"masterMind"});
var joke1 = new Joke({joke:"Girls are cute and funny hahahaha"});
jokesCollection = new JokesCollection();
jokesCollection.add(joke1);
jokesCollection.add(person1); // This adds a model of class "Person" to the collection. Witch is not what I want. It is not supposed to work! I want "jokesCollection" to only accept models of class "Joke".
console.log(jokesCollection.length); // length gets increased by 1 after adding "person1" to "jokesCollection". Again, it is no supposed to work from my point of view. I want "jokesCollection" to only accept models of class "Joke".
console.log(jokesCollection);
From official docs:
model collection.model
Override this property to specify the model class that the collection
contains. If defined, you can pass raw attributes objects (and arrays)
to add, create, and reset, and the attributes will be converted into a
model of the proper type.
Looks like will have to re-write add method something like this :
add: function(models, options) {
var modelClass = this.model;
isProperIns = this.models.every.(function(model){
return model instanceof modelClass;
});
if (!isProperIns) {
throw new Error("Some of models has unacceptable type")
}
return this.set(models, _.extend({merge: false}, options, addOptions));
}
The purpose of a Collection's model property is not to limit which models the Collection can accept. Rather, that property defines the Model class which the Collection will use when it needs to create a new Model. For instance,when you pass an object literal of Model attributes (as opposed to an instantiated Model) to JokesCollection.add, or when you fetch models in to a JokesCollection, Backbone will use Joke as the Model to instantiate those new additions to the Collection.
There are two ways to ensure your JokesCollection is only populated with instances of Joke. The first way is to never add Model instances to the JokesCollection directly, and instead either:
A) Bring new Jokes in from the server by calling fetch on a JokesCollection
B) add only "raw" Model attributes to the JokesCollection; don't add instantiated Models
However, if you're concerned about a developer accidentally adding a non-Joke Model to the Collection, your other option (as first suggested by #Evgeniy) is to overwrite your JokesCollection's add method. Unlike #Evgeniy's answer though I would not recommend re-writing Backbone's internals. Instead, I would use a simple overwrite that just calls the base Backbone method if possible:
add: function(models, options) {
if (models instanceof Joke) {
// Use the normal Backbone.Collection add method
return Backbone.Collection.prototype.add.call(this, models, options);
}
var allModelsAreJokes = _(models).all(function(model) {
return model instanceof Joke;
));
if (allModelsAreJokes) {
// Use the normal Backbone.Collection add method
return Backbone.Collection.prototype.add.call(this, models, options);
}
// Handle the case where non-Jokes are passed in; either:
// A) convert whatever was passed in to be a Joke:
// var rawModels = _(models).isArray() ? _(models).invoke('toJSON') : model.toJSON();
// return Backbone.Collection.prototype.add.call(this, rawModels, options);
// B) just don't add anything
}
Usually I find my self needing to write an object with a specific functionality that it is a set of models.
Finally I extend a collection and add more functions that works with its model.
I think is better show you an example:
My app has a set of permissions, related with the user and/or the version of the platform.
var Permissions = Backbone.Collection.extend({
model: Permission,
hasAccess: function (moduleCode) {
....
},
allowAccess: function (moduleCode) {
....
},
...
With that methods I change the format of a property of a permission (the model). (My permissions are a concatenation of code with an string that identify the type of permission.)
A workmate tells me that it is wrong. In .NET he creates a class and he adds a private list and makes the changes to it. He does not inherit the list and changes it.
He would make a model and inside it he would add a collection property
this.set("permissionsCollection", new Backbone.Collection.extend({model: Permission}))
[Comment: I don't understand why he creates properties of everything, I think in his case it is not needed.] -> But this is another question
I think in a different way. I know the Collection has internally that list. I have a great potencial in Backbone.Collections, why do I have to use a model that it is not necessary? If I don't need that encapsulation... I think that it is not necessary, he is overprogramming in my opinnion.
Am I wrong? Did I not know how to use BackboneJS Collections?
Thank you in advance.
At the beginning I had something called helper with similar methods:
findAttr: function (model, name) {
var attrs = model.get('app_attrs');
if (attrs !== undefined) {
return this.findByAttrName(attrs, name);
}
},
findByAttrName: function (array, name) {
return _.find(array, function(a) {
if (a.attrName === name) {
return a;
}
});
}
The view code was more awkward:
render: function () {
var attr = helper.findAttr(this.model, 'user');
...
return this;
}
The only logical solution was to move these methods into the model (this.model in the above case). After refactoring I've got:
render: function () {
var attr = this.model.findAttr('user');
...
return this;
}
which is of course more readable than the previous solution.
I've got a Backbone model that has some of it's dependencies loaded via require JS. I'm handling it this way to get around the circular dependency issue with Require.js. (We have multiple files requiring models, collections, and views, and some of them are circular.)
The problem is that attributes set on the model (this), are coming out as undefined outside the require statement. Code is here:
define(["jquery", "backbone"],
function($, Backbone) {
var Model = Backbone.Model.extend({
initialize: function(options) {
var that = this;
require(["collections/agenciesCollection", "collections/usersCollection", "models/userModel"], function(Agencies, Users, User) {
that.agencies = (!options || !options.agencies) ? new Agencies() : new Agencies(options.agencies);
that.users = (!options || options.users) ? new Users() : new Users(options.users);
if(!options || !options.contact) that.set("contact", new User()); else that.set("contact", new User(options.contact));
if(!options || !options.admin) that.set("admin", new User()); else that.set("admin", new User(options.contact));
console.log(that.agencies); // This is set to a collection
});
console.log(this.agencies); // This is 'undefined'
console.log(this); // This has an attribute "agencies" listed in Chrome inspector
}
return Model;
});
You're using the async require call in your constructor so the properties haven't been defined by the time you try to log the values to the console.
These lines:
console.log(this.agencies); // This is 'undefined'
console.log(this); // This has an attribute "agencies" listed in Chrome inspector
are executing before this one:
console.log(that.agencies); // This is set to a collection
UPDATE
Based on your last comment, figured I'd give you an example of how you can simplify your module definition dependency list. You can try requiring your dependencies like this:
define(function (require) {
var $ = require("jquery");
backbone = require("backbone");
agencies = require("collections/agenciesCollection");
users = require("collections/usersCollection");
userModel = require("models/userModel");
// TODO: define your exports using the required dependencies
});
This may also help explain the different ways to load dependencies: https://github.com/jrburke/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define
I see there are techniques available to have deep models in Backbone, but how about hierachical collections of a single model?
An obvious example is a category tree. So, we can have a category model which has a few properties, 'name', 'type', 'color', whatever.
Rather than have relational db style parent ids, we're using js so we want the data to be represented as json.
Can backbone be leveraged to support (presumably by augmenting collections) data structures that contain instances of a single model in a tree (such that the models and sub models are all instances of the same model)?
Have a look at Backbone-Relational or supermodel.js.
These projects provide better forms of model nesting than the default implementation.
We just nest Backbone models like:
var MyModel = Backbone.Model.extend({});
var MySubModel = Backbone.Model.extend({});
var model = new MyModel({submodel: new MySubModel({color: 'blue'})});
And we override the toJSON methods:
// nested models! Might just override the internal representation of this...
_.extend(Backbone.Model.prototype, {
// Version of toJSON that traverses nested models
toJSON: function() {
var obj = _.clone(this.attributes);
_.each(_.keys(obj), function(key) {
if(!_.isUndefined(obj[key]) && !_.isNull(obj[key]) && _.isFunction(obj[key].toJSON)) {
obj[key] = obj[key].toJSON();
}
});
return obj;
}
});
_.extend(Backbone.Collection.prototype, {
// Version of toJSON that traverses nested models
toJSON: function() {
return this.map(function(model){ return model.toJSON(); });
}
});
So the JSON representations look correct when we nest models. You'll have to pay attention to the parse method on your model though - when you get back your JSON from the server you're going to have to generate all the submodels and collections there in order for it all to work correctly.
I have a view for a collection, and when I invoke its remove method I call its collection remove method as well, and I'm getting a 'ReferenceError: el is not defined' which doesn't make any sense to me, why would a collection need an el.
Invoking code:
try {
myAppModel=backboneApp.views.privateViews.myAppsTabView.myAppsView.views.myAppsPrivateView.collection.get(appId);
backboneApp.views.privateViews.myAppsTabView.myAppsView.views.myAppsPrivateView.remove(myAppModel);
} catch(e) {
console.log("delFromMyAppsCollection: Failed to delete app from collection e= " + e);
}
Remove method within View:
remove : function(modelToRemove) {
alert('Killing!');
console.log("MyAppsPrivateView.remove called with model: ", modelToRemove );
this.collection.remove(modelToRemove);
console.log("MyAppsPrivateView.remove collection: ", this.collection );
this._rendered = false;
}
I guess it may be a better way to delete an element from a collection/view, but still it seems odd that the collection is complaining about not having an el, any ideas?
Thanks in advance.
Just in case,
view definition:
var MyAppsPrivateView = Backbone.View.extend( {
// Reference to this collection's model.
model: PapsCatalog , // don't should be PapModel instead of a collection?
templateId: Epc2G.myAppsTemplateId,
template: jQuery('#' + this.templateId).html(),
view instantiation:
var options = {
className : "MyAppsContainer",
uid : "myAppsPrivateView",
collection : papsCollection,
el : "#myAppsView"
};
var oMyAppsPrivateView = new MyAppsPrivateView(_.clone(options));
Might it relate to Backbone.View already having a remove method, and you’re overriding it?
This sounds like a composite view situation, have you considered having a view for every model in the collection?