So, building an application that uses multiple (2 for now) global collections, it is a catalog of both documents and patients, they have relations, but not as in, 1 document or a list of documents belonging to 1 patient, so they are in fact 2 separate collections,

my app is structured in a module system very similar to how it is described here:

the backbone.js documentation says about bootstrapping, to do something like this,

<script>
  Accounts.reset(<%= @accounts.to_json %>);
</script>

that is within a Rails application, i would however need to do it differently in asp MVC3, most likely i would just print out my json string without the <%= %> which isn't razor view engine style)

but my question here is,

this Accounts.reset(...data...); is just floating somewhere in my markup, it is not in any way nicely structured in my module system, isn't there a way to nicely do this? where as i can get the data, from within my module?

and another side question, suppose i have a route in my backbone app

and someone calls this link directly, will my app have the data ready (from the bootstrap) on time, before the route itself is executed?

So, building an application that uses multiple (2 for now) global collections, it is a catalog of both documents and patients, they have relations, but not as in, 1 document or a list of documents belonging to 1 patient, so they are in fact 2 separate collections,

my app is structured in a module system very similar to how it is described here: http://weblog.bocoup./organizing-your-backbone-js-application-with-modules

the backbone.js documentation says about bootstrapping, to do something like this,

<script>
  Accounts.reset(<%= @accounts.to_json %>);
</script>

that is within a Rails application, i would however need to do it differently in asp MVC3, most likely i would just print out my json string without the <%= %> which isn't razor view engine style)

but my question here is,

this Accounts.reset(...data...); is just floating somewhere in my markup, it is not in any way nicely structured in my module system, isn't there a way to nicely do this? where as i can get the data, from within my module?

and another side question, suppose i have a route in my backbone app http://example./#documents

and someone calls this link directly, will my app have the data ready (from the bootstrap) on time, before the route itself is executed?

• javascript
• asp-mvc
• backbone.js

• 2 I'm no backbone.js expert but I wrote a simple JsFiddle that does this type of bootstrapping, albeit a little different. Basically, I when I initialize my View, it creates the Collection and calls Collection.refresh(). So anywhere I create my View, it auto-initializes its data...or bootstraps based on your verbiage. Here is the link to the JsFiddle: jsfiddle/jcscoobyrs/WVX66 – Jeremy Whitlock Commented Oct 25, 2011 at 23:08
• good idea, but as i read on the backbone documentation, using fetch (or like you refresh your collection) is not necessary on page load. why have a second connection to fetch all the data, while you could have sent it immediately with the page. all i wonder is if the way i do it now is the best way to give it with the html... as now it just inserts a script tag, adding a whole heap of json data, which i of course remove after initializing my collection. however since your json es from an external source you can't use my technique for your example so using collection.refresh() would be best – Sander Commented Oct 25, 2011 at 23:26
• Backbone.js is written to interface with RESTful endpoints and it does this by tying your Collection to a REST endpoint that is used to retrieve/fresh your collection. While you can bootstrap things the way you're wanting, as you see by the answer you got, it's not as mon as you think. The purpose of backbone.js and the like is to separate UI/View from the data itself so in my experiences, I never pass anything more than boilerplate HTML to load my backbone.js which then will do its work of retrieving/refreshing/managing my REST-based objects. "To each his own." :) – Jeremy Whitlock Commented Oct 26, 2011 at 16:18
• Jeremy, I agree with you 100%, but the backbone documentation does remend what he's saying. While it is "wasteful" to use a separate XHR request to load the content, it also doesn't really matter, if you consider that this is how every image, css document, and remote script is loaded on the page already. Using an initial fetch also simplifies your workflow. This is especially true if you're using a server-side caching mechanism for XHR requests. – mikermcneil Commented Jan 26, 2012 at 0:08

3 Answers 3

I tend to setup application objects - an object that encapsulates all of the code needed to start my application. I then take parameters into that object's constructor, so that they can be used by the app object. Passing pre-loaded JSON data into the app object is one of the things I do, to keep the code sane and encapsulated.

It goes something like this, usually:

MyApp = (function(Backbone, _){
  var MyModel = Backbone.Model.extend({});

  var MyCollection = Backbone.Collection.extend({
    model: MyModel
  });

  var MyView = Backbone.View.extend({
    initialize: function(){
      this.collection.bind("reset", this.render, this);
    },

    render: function(){
      // do stuff with the collection here
    }
  });

  var myApp = function(initialModels){
    this.start = function(){
      this.models = new MyCollection();
      this.myView = new MyView({collection: this.models});
      this.models.reset(initialModels);  
    };
  };

  return myApp;
})(Backbone, _);

And then in my page that needs to start up the app, I do this:

<script language="javascript">
  var myApp = new MyApp(<%= mymodels.to_json %>);
  myApp.start();
</script>

That's the rails version of course. Just replace the <%= ... %> with your version for the Razor syntax in ASP.NET MVC.

if on Rails: in addition to Dericks answer you might want to use Gon to "get your Rails variables in your js".

then you would initialize your app like that:

<script language="javascript">
  var myApp = new MyApp(gon.mymodels);
  myApp.start();
</script>

The excellent example from Derick! For MVC 3+ use this syntax:

<script language="javascript">
  var myApp = new MyApp( @Html.Raw(Json.Encode(Model)) );
  myApp.start();
</script>