Develop Reference

general backbone/marionette program structure

I need some general guidelines on how to structure a backbone/marionette application. Im very new to these frameworks and also to js in general.
Basically I have two pages and each page has a list. I have set up an application and a router for the application:
var app = new Backbone.Marionette.Application();
app.module('Router', function(module, App, Backbone, Marionette, $, _){
module.AppLayoutView = Marionette.Layout.extend({
tagName: 'div',
id: 'AppLayoutView',
template: 'layout.html',
regions: {
'contentRegion' : '.main'
},
initialize: function() {
this.initRouter();
},
...
});
module.addInitializer(function() {
var layout = new module.AppLayoutView();
app.appRegion.show(layout);
});
});
In the initRouter I have two functions, one for each page that gets called by router depending on the url.
The function for the content management page looks like this:
onCMNavigated: function(id) {
var cMModule = App.module("com");
var cM = new cMModule.ContentManagement({id: id, region: this.contentRegion});
contentManagement.show();
this.$el.find('.nav-item.active').removeClass('active');
this.cM.addClass('active');
}
So if this is called, I create a new instance of ContentManagement model. In this model, when show() is called, I fetch the data from a rest api, and I parse out an array of banners that need to be shown in a list view. Is that ok? The model looks like the following:
cm.ContentManagement = Backbone.Model.extend({
initialize: function (options) {
this.id = options.id;
this.region = options.region;
},
show: function() {
var dSPage = new DSPage({id: this.id});
dSPage.bind('change', function (model, response) {
var view = new cm.ContentManagementLayoutView();
this.region.show(view);
}, this);
dSPage.fetch({
success: function(model, response) {
// Parse list of banners and for each create a banner model
}
}
});
cm.ContentManagementLayoutView = Marionette.Layout.extend({
tagName: 'div',
id: 'CMLayoutView',
className: 'contentLayout',
template: 'contentmanagement.html',
regions: {
'contentRegion' : '#banner-list'
}
});
Now my biggest doubt is how do I go on from here to show the banner list? I have created a collectionview and item view for the banner list, but is this program structure correct?

do You really need marionnete to manage your application ? especially You are beginner as me too :)
try pure backbone first. You can still use marionette as a library.
backbone MVC architecture is described perfectly on many sites.

Use same Backbone collection in nested object during parse [duplicate]

I'm setting up a nested categories structure in Backbone with RequireJS.
In this structure, a categories collection contains category models, and a single category model can contain a categories collection.
Unfortunately this seems to cause the dreaded circular dependencies problem in RequireJS. I have read the docs on RequireJS (http://requirejs.org/docs/api.html#circular) however I am finding the explanation with 'a' and 'b' confusing.
Here is my code, which is causing the problem:
define([
"jquery",
"underscore",
"backbone",
"collections/categories"
], function( $, _, Backbone, CategoriesCollection ) {
var Category = Backbone.Model.extend({
defaults: {
title: "Untitled"
},
parse: function(data) {
this.children = new CategoriesCollection( data.children, {parse: true} );
return _.omit( data, "children" );
}
});
return Category;
});
...
define([
"jquery",
"underscore",
"backbone",
"models/category"
], function( $, _, Backbone, CategoryModel ) {
var Categories = Backbone.Collection.extend({
model: CategoryModel
});
return Categories;
});
I am wondering if anyone who has experienced this before can help steer me in the right direction.
Thanks (in advance) for your help,

You just need to use require the collection again when you need it in the model, as the Collection passing initially can be undefined:
define([
"jquery",
"underscore",
"backbone",
"collections/categories"
], function( $, _, Backbone, CategoriesCollection ) {
var Category = Backbone.Model.extend({
defaults: {
title: "Untitled"
},
parse: function(data) {
if(!CategoriesCollection){
CategoriesCollection = require("collections/categories");
}
this.children = new CategoriesCollection( data.children, {parse: true} );
return _.omit( data, "children" );
}
});
return Category;
});
In the example they import also require but it should also work without the import.

For this you should consider to use a plugin like Backbone Relational.

Backbone.js Model does not inherit from collection

I have a model called score and a collection called scores. However, the model does not seem to be inheriting the localStorage property (or for that matter, any property) from the parent collection. Am I missing something here?
Running Backbone with RequireJS.
models/score.js
define([
'underscore',
'backbone',
'localstorage'
], function(_, Backbone, Store){
var ScoreModel = Backbone.Model.extend({
defaults: {
board_id: null,
ns_pair: null,
ew_pair: null,
ns_score: null
},
validate: function(attrs, options){
if( isNaN(attrs.board_id) || attrs.board_id < 1 ){
return 'Invalid Board ID!';
}
},
localStorage: new Store("ScoreCollection")
});
return ScoreModel;
});
collections/scores.js
define([
'underscore',
'backbone',
'models/score',
'localstorage'
], function(_, Backbone, ScoreModel, Store){
var ScoreCollection = Backbone.Collection.extend({
model: ScoreModel,
localStorage: new Store("ScoreCollection")
});
return ScoreCollection;
});
main.js
require.config({
paths: {
// Major libraries
jquery: 'libs/jquery/jquery.min',
underscore: 'libs/underscore/underscore.min',
backbone: 'libs/backbone/backbone.min',
// Require.js plugins
text: 'libs/require/text',
// Backbone.js plugins
localstorage: 'libs/backbone/localstorage',
// Just a short cut so we can put our html outside the js dir
// When you have HTML/CSS designers this aids in keeping them out of the js directory
templates: '../templates'
}
});
// Let's kick off the application
require([
'app'
], function(App){
App.initialize();
});

Backbone Models don't inherit from Backbone Collections. They're just extensions of the base Backbone.Model that you 'extend' with your own properties and methods. Collections, the same deal. You can specify that a collection's model is based on a particular model you've defined so that when collections are added to it, it uses the model constructor to create instances for each model in that collection, but there is no direct inheritance relationship there. You can define a property on a model that happens to be an instance of a collection if that suits your needs.

can't fetch properly collection using backbone.js

Please read till the end (i make a reference to console.log at the end)
the model:
// Spot model:
define([
'jquery',
'underscore',
'backbone'
], function($, _, Backbone){
var Spot = Backbone.Model.extend({
url: function(){
if (this.get('id') !== null){
return '/spot/' + this.get('id');
}
return '/spots';
},
idAttribute: "id",
defaults: {
id: null,
details:{
name: "school",
type: 4,
rank: 3,
comment: null
},
location:{
address: '',
lat: 70.345,
lng: 90.123
},
user:{
id: 12345,
name: "magneto"
}
},
parse: function(response){
/* var attrs = {
details: {},
location: {},
user: {}
};
attrs.id = response.id;
attrs.details.name = response.details.name;
attrs.details.type = response.details.type;
attrs.details.rank = response.details.rank;
attrs.location.lat = response.location.lat;
attrs.location.lng = response.location.lng;
return attrs; */
}
});
return Spot;
});
the collection:
// Spots collection:
define([
'jquery',
'underscore',
'backbone',
'models/Spot'
], function($, _, Backbone,spot_model){
var Spots = Backbone.Collection.extend({
model: spot_model,
url:
function() {
return '/projects/FE/spots';
},
parse: function(response){
/* var parsed = [],
key;
_.each(response, function (value) {
parsed.push(value);
}, this);
return parsed;*/
},
comparator: function(spot){
return spot.rank;
}
});
return Spots;
});
the view:
// inside our view named: SpotsView
define([
'jquery',
'underscore',
'backbone',
'mustache',
'icanhaz',
'views/spots/Spot',
'collections/Spots',
'text!../../../../templates/spots/spots.mustache!strip',
], function($,
_,
Backbone,
mustache,
ich,
SpotView,
Spots,
SpotsTemplate){
var SpotsView = Backbone.View.extend({
//el: $("#container"),
tagName: "ul",
initialize: function(){
console.log('initialize view');
console.log(this.collection);
_.bindAll(this,'render');
},
render: function(){
console.log(this.collection);
console.log('length: ' + this.collection.length);
console.log('models: ' + this.collection.models);
_.each(this.collection.models, function (spot) {
$(this.el).append(new SpotView({model:spot}).render().el);
}, this);
return this;
}
});
return SpotsView;
});
inside our app.js
var spots = new Spots({model: Spot}),
spotsview;
spots.reset();
console.log(spots.fetch());
console.log('spots:');
console.log(spots.length);
console.log(spots);
spotsview = new SpotsView({collection: spots});
Server outputs
// SERVER output(s) i tried:
{"id": 666,"details":{"name": "mark","type":4,"rank":3.1,"comment":"nothing"},"location":{"lat":70.123,"lng":90.321,"address":"5th avenue"},"user":{"id":333,"name":"wolverine"}}
// another one i tried:
[{"id": 666,"details":{"name": "mark","type":4,"rank":3.1,"comment":"nothing"},"location":{"lat":70.123,"lng":90.321,"address":"5th avenue"},"user":{"id":333,"name":"wolverine"}}]
// another one:
[{"id":"55","details":{"name":"Dan","type":"6","rank":"-9.9","comment":"myEx"},"location":{"lat":"40.780346","lng":"-73.957657","address":"78, West 86th Stree"}},{"id":"57","details":{"name":"Ron","type":"6","rank":"3.0","comment":"Butch"},"location":{"lat":"40.715569","lng":"-73.832428","address":"1344 Queens Boulevard"}},{"id":"58","details":{"name":"Monk's","type":"11","rank":"9.5","comment":"yesss"},"location":{"lat":"40.805443","lng":"-73.965561","address":"112th and broadway "}}]
// without using "parse" method in the collection and in the model (they are commented) i get:
d
_byCid: Object
_byId: Object
length: 0
models: Array[0]
__proto__: x
// when not commented (parse in both collection and model) i get:
_byCid: Object
_byId: Object
length: 6
models: Array[6]
__proto__: x
// despite it says 6, in the view you can see there are lines:
//console.log(this.collection); <--- returns the abovee
//console.log('length: ' + this.collection.length); <-- returns 0
//console.log('models: ' + this.collection.models); <--- none
I also tried removing all properties defenitions from the model. Still didn't work.
The return value content type is: application/json (verified) and is valid json.
I've read:
Backbonejs collection length always zero
but inspite of console.log , showing 0 length , also:
for(var i=0; i< this.collection.length; i++){
console.log(this.collection.get(i));
}
doens't work!
also i've read
Did backbone collection automatically parse the loaded data
Thanks a lot
Update:
I've probably solved it: i've removed even the "parse" declarations from the model and the collection and It worked: length: 6 SpotsView.js models: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object] Either way i would like to know the proper use , if i did right and HOW to use PARSE in both situations the right way (collection and model wise), what do you return in both (!). Tnx

Collection.fetch is an asynchronous operation, therefore when you fetch a collection, the ajax call will be sent and then your code will continue being run just like nothing happened.
spots.reset(); // emptied your collections
console.log(spots.fetch()); // fetch your collection (why is this inside a console.log???)
console.log('spots:'); // log some text, this will be executed right after your fetch call has been made
console.log(spots.length); // here the fetch call probably hasn't returned yet, so returns 0
console.log(spots); // same as above, so returns an empty collection
spotsview = new SpotsView({collection: spots}); // the collection might or might not get populated by the time you get to rendering so there is probably variation from program run to another
So how to fix this? In the view bind the render function to the collection's reset event (launched after each successful fetch or forced reset). This way the view will render only when it has something to show.
// view's initialize method
initialize: function() {
...
this.collection.on('reset', this.render);
...
}

Backbone JS complex model fetch

I have two backbone models, loaded from server:
var Model = Backbone.Model.extend({});
var SubModel = Backbone.Model.extend({});
var SubCollection = Backbone.Collection.extend({
model: SubModel
});
var m = new Model();
m.fetch({success: function(model)
{
model.submodels = new SubCollection();
model.submodels.url = "/sub/" + model.get("id");
model.submodels.fetch();
}});
So, the server has to send two separate responses. For example:
{ name: "Model1", id: 1 } // For Model fetch
and
[{ name: "Submodel1", id: 1 }, { name: "Submodel2", id: 2 }] // For Submodel collection fetch
Is there a way to fetch a Model instance with Submodel collection at once, like:
{
name: "Model1",
id: 1,
submodels: [{ name: "Submodel1", id: 2 }, { name: "Submodel1", id: 2 }]
}

To be able to do that is up to your back-end - it doesn't really have anything to do with Backbone.
Can you configure your back-end technology to return related models as nested resources?
If your back-end is Rails, for instance, and your models are related in ActiveRecord, one way of doing this is something like
respond_to do |format|
format.json { render :json => #model.to_json(:include => [:submodels])}
end
What back-end technology are you using?
Edit:
Sorry, misunderstood the gist of your question, once you've got your back-end returning the JSON in the proper format, yeah, there are things you need to do in Backbone to be able to handle it.
Backbone-Relational
One way to deal with it is to use Backbone-Relational, a plugin for handling related models.
You define related models through a 'relations' property:
SubModel = Backbone.RelationalModel.extend({});
SubCollection = Backbone.Collection.extend({
model: SubModel
});
Model = Backbone.RelationalModel.extend({
relations: [
{
type: 'HasMany',
key: 'submodels',
relatedModel: 'SubModel',
collectionType: 'SubCollection'
}
]
});
When your Model fetches the JSON, it will automatically create a SubCollection under the 'submodels' property and populate it with SubModels - one for each JSON object in the array.
jsfiddle for backbone-relational: http://jsfiddle.net/4Zx5X/12/
By Hand
You can do this by hand if you want as well. In involves overriding the parse function for your Model class (forgive me if my JS is not 100% correct - been doing CoffeeScript so much lately its hardwired in my brain)
var Model = Backbone.Model.extend({
parse: function(response) {
this.submodels = new SubCollection();
// Populate your submodels with the data from the response.
// Could also use .add() if you wanted events for each one.
this.submodels.reset(response.submodels);
// now that we've handled that data, delete it
delete response.submodels;
// return the rest of the data to be handled by Backbone normally.
return response;
}
});
parse() runs before initialize() and before the attributes hash is set up, so you can't access model.attributes, and model.set() fails, so we have to set the collection as a direct property of the model, and not as a "property" that you would access with get/set.
Depending on what you want to happen on "save()" you may have to override `toJSON' to get your serialized version of the model to look like what your API expects.
jsfiddle:
http://jsfiddle.net/QEdmB/44/