Develop Reference

Relation between models in backbone.js

I'm looking for the correct backbone structure to achieve the following:
Two server APIs:
GET api/event/4 : returns the event object with id 4.
GET api/event/4/registrations : returns the list of registration objects belonging to event with id 4
I want a view displaying the event object and the list of registrations.
This is very straightforward but I cannot figure out how to organize my Event and Registration models.
Should I use backbone-relational?
My Event model is currently like this:
(the collection is expected to contain the next 10 events from now).
How should I define my Registration model and how will I initialize it, knowing that it is always in the context of an Event model?
var app = app || {};
app.EventModel = Backbone.Model.extend({
urlRoot: app.API_server + 'event'
});
app.EventCollection = Backbone.Collection.extend({
model: app.EventModel,
url: app.API_server + 'event',
initialize: function(){
dt = new Date();
start_dt = dt.toISOString();
this.fetch({
data: {limit:10, start_dt:start_dt},
error: function (model, response, options) {
if(response.status == '403') {
app.Session.logout();
}
}
})
}
});

Make a collection for the registration and use the url property as a function. By default, the urlRoot of the models of the RegistrationCollection will be the url of the collection with their id appended.
app.RegistrationCollection = Backbone.Collection.extend({
url: function() {
return app.API_server + 'event/' + this.id + '/registrations';
},
initialize: function(models, options) {
options = options || {};
this.id = options.id;
}
});
Then, on EventModel initializing, add a RegistrationCollection as a property, passing the event id as an option to the collection.
app.EventModel = Backbone.Model.extend({
urlRoot: app.API_server + 'event',
initialize: function() {
this.registrations = new app.RegistrationCollection(null, {
id: this.id
});
}
});
Remove the fetch from the init, you want to make your collection reusable.
app.EventCollection = Backbone.Collection.extend({
model: app.EventModel,
url: app.API_server + 'event',
});
Fetch inside the view or the router, depending on where it makes more sense for your app.
var EventView = Backbone.View.extend({
initialize: function() {
this.collection = new app.EventCollection();
var dt = new Date(),
start_dt = dt.toISOString();
// this should be here, outside of the collection.
this.collection.fetch({
data: { limit: 10, start_dt: start_dt },
error: function(model, response, options) {
if (response.status === 403) {
app.Session.logout();
}
}
});
},
});

Backbone - model.destroy() function not defined for model

For some reason, I am getting a TypeError in my JavaScript regarding a supposed Backbone model object for which I am trying to call "model.destroy()":
Here's my Backbone code:
var Team = Backbone.Model.extend({
idAttribute: "_id",
urlRoot: '/api/teams'
});
var TeamCollection = Backbone.Collection.extend({
model: Team
});
var teamCollection = new TeamCollection([]);
teamCollection.url = '/api/teams';
teamCollection.fetch(
{
success: function () {
console.log('teamCollection length:', teamCollection.length);
}
}
);
var UserHomeMainTableView = Backbone.View.extend({
tagName: "div",
collection: teamCollection,
events: {},
initialize: function () {
this.collection.on("reset", this.render, this);
},
render: function () {
var teams = {
teams:teamCollection.toJSON()
};
var template = Handlebars.compile( $("#user-home-main-table-template").html());
this.$el.html(template(teams));
return this;
},
addTeam: function (teamData) {
console.log('adding team:', team_id);
},
deleteTeam: function (team_id) {
console.log('deleting team:', team_id);
var team = teamCollection.where({_id: team_id}); //team IS defined here but I can't confirm the type even when logging "typeof"
console.log('team to delete', typeof team[0]);
console.log('another team to delete?',typeof team[1]);
team.destroy({ //THIS FUNCTION CALL IS THROWING A TYPEERROR
contentType : 'application/json',
success: function(model, response, options) {
this.collection.reset();
},
error: function(model, response, options) {
this.collection.reset();
}
});
}
});
So I am fetching the data from the node.js server, and the server is returning JSON. The JSON has cid's and all that jazz, so those objects were once Backbone models at some point.
I just don't know why the type of team would not be a Backbone model.
Any ideas?

.where returns an array. You need to use .findWhere instead.
Or call destroy for every model in the resulting array.
.where({...}).forEach(function(model){
model.destroy();
});

backbone collection undefined on sync

For some reason my collection is set to undefined when I fetch it. If I log the collection before the fetch I actually get this:
http://i.stack.imgur.com/CdPH0.png
If I log it after the fetch (when the sync event is triggered) I get undefined.
The view
App.Views.Overview = Backbone.View.extend({
template:tpl.overview,
tagName:"div",
id:"overview",
initialize:function () {
console.log('Initializing Overview');
this.collection.on("sync reset",this.render);
},
render:function () {
console.log(this.collection);
$(this.el).html(this.template);
return this;
}
});
The collection
App.Collections.Gardens = Backbone.Collection.extend({
model: App.Models.Garden,
url: Settings.API + "/gardens"
});
The Model
App.Models.Garden = Backbone.Model.extend({
defaults:{
id:"undefined",
owner_id:"undefined",
name:"undefined",
width:"undefined",
height:"undefined"
}
});
The creation
This is how I create the view:
var gardens = new App.Collections.Gardens();
gardens.fetch();
this.overview = new App.Views.Overview({collection: gardens});
Thanks in advance !

How do i stop a single model adding his id to url in Backbone?

i have a problem with backbone.js. I'm creating a frontend for an existing api, for me unaccessable. The problem is that when I try to add a new model to a collection, i can see in my firebug that every time backbone tries to create the model it appends the attribute name to the url.
Example:
default url = /api/database
when i perform a GET = /api/database
when i perform a GET/POST with object {"name": "test"} =
/api/database/test is the result
Anyone knows how to avoid that behaviour?
Greetings Kern
My View:
window.databaseView = Backbone.View.extend({
el: '#content',
template: new EJS({url: 'js/templates/databaseView.ejs'}),
initialize: function() {
var self = this;
this.collection.fetch({
success: function() {
console.log(self.collection);
var test = self.collection.get("_system");
console.log(test);
self.collection.get("_system").destroy();
self.collection.create({name: "test"});
}
});
},
render: function(){
$(this.el).html(this.template.render({}));
return this;
}
});
Model:
window.Database = Backbone.Model.extend({
initialize: function () {
'use strict';
},
idAttribute: "name",
defaults: {
}
});
Collection:
window.ArangoDatabase = Backbone.Collection.extend({
model: window.Database,
url: function() {
return '../../_api/database/';
},
parse: function(response) {
return _.map(response.result, function(v) {
return {name:v};
});
},
initialize: function() {
this.fetch();
},
getDatabases: function() {
this.fetch();
return this.models;
},
dropDatabase: function() {
},
createDatabse: function() {
}
});

By default, Backbone create models URLs this way: {collection url}/{model id}.
It consider the collection URL to be a base URL in a RESTful way.
Here you only want to set the Model url property to the URL you whish to call. That'll overwrite the default behavior. http://backbonejs.org/#Model-url

Backbone Collection with multiple models?

I'm learning Backbone.
I want to create a list that can contain different models, with different attributes.
For example, listing folder contents, which could include models of type file and models of type folder, in any order.
file : {
title : "",
date : "",
type : "",
yaddayadda : ""
}
folder : {
title : "",
date : "",
haminahamina : ""
}
What is the proper way to represent this in Backbone? Is it possible to have a single Collection with multiple models?

Create a base model that your other models inherit from:
var DataModel = Backbone.Model.extend({
// Whatever you want in here
});
var FileModel = DataModel.extend({
// Whatever you want in here
});
var FolderModel = DataModel.extend({
// Whatever you want in here
});
And make the model type of the collection be that same base model:
var DataCollection = Backbone.Collection.extend({
model: DataModel
});

You could also do it the backbone way. Check out the docs backbone collection
Basically you would create different models adding a tie breaker attribute say "type" in this case.
var file = Backbone.Model.extend({
defaults: {
// will need to include a tie breaker attribute in both models
type: 'file'
}
}),
folder = Backbone.Model.extend({
defaults: {
// tie breaker
type: 'folder'
}
});
var fs = Backbone.Collection.extend({
model: function(model, options) {
switch(model.type) {
case 'file':
return new file(model, options);
case 'folder':
return new folder(model, options);
}
}
});
// after that just add models to the collection as always
new fs([
{type: 'file',name: 'file.txt'},
{type: 'folder',name: 'Documents'}
]);

Backbone documention is not complete in this case. It will not work when used with merge:true option and idAttribute. In that case you need to:
var ModelFactory = function (attr, options) {
switch (attr.type) {
case 'file':
return new file(attr, options);
case 'folder':
return new folder(attr, options);
}
};
ModelFactory.prototype.idAttribute = '_id';
var fs = Backbone.Model.extend({
model: ModelFactory
});

var bannedList = app.request('rest:getBan');
var whiteIpList = app.request("rest:getWhite");
var whiteGroupList = app.request("rest:....");
$.when(bannedList, whiteIpList, whiteGroupList).
done(function (bannedList, whiteIpList, whiteGroupList) {
var collection = new Backbone.Collection();
collection.add(bannedList);
collection.add(whiteIpList);
collection.add(whiteGroupList);
});
app.reqres.setHandler("rest:getBannedList", function (data) {
return API.getBannedList(data);
});
getBannedList: function (data) {
var user = new Backbone.Model();
user.url = '/banned';
user.cid = 'bannedList';
var defer = $.Deferred();
user.fetch({
type: 'GET',
data: data,
success: function (data) {
defer.resolve(data);
},
error: function (data) {
defer.reject(data);
}
});
return defer.promise();
},