Question

I ve just started using Backbone (and Underscore) JS. We are doing a big iPad HTML5 application and it needs to work all client side. The project needs structure and Backbone seems to be a good fit. Doesn t seem to get in the way too much and can be used as a bit of a toolkit (especially because of Underscore being needed too).

I have one question though. This HTML5 app is basically a Single Page Application. Everything starts from a index.html file. I ve been getting to know Backbone s way of managing URL fragments, which I really like. It s easy to set up routing events to particular models.

This HTML5 app I m working on has many nested layers of "pages" in it. There is a about three levels of nesting. That s the JSON data, which this app uses (I ve yet to get into local database storage etc, but maybe I should? Just wanted to get my head around Backbone first). They are normal webpages, as such, they are just pages of content that has been loading into various parts of the webapp.

I ve been using views. I think I have the concept... Populate a Collection with data and the View is built around this Collection of data. I understand that for a single instance of a Model it has a View to go with it. Then when you want to view the model s Collection, you can call a View that will iterate over the Collection and call each individual model s View.

Sorry, I know I m not probably making much sense!

But basically, I see that Backbone Views are used to generate HTML for a single Model, for a model s Collection... so that s all the small views sorted for the various parts of the page, but what about a View for an entire page? Say this HTML5 app had a basic template, but different pages of the webapp needed different entire page layouts so they can look how they should? You can do this sort of thing? Basically having a View that does an Ajax call to get an entire page template?

The below example is a View which is called from the main Constructor when the URL is at the root of the app. There is various views like this I want to set up, which my app will need to show when the user is at various URLs. Is it wrong to load in a whole Ajax template like I am here? What other ways are there to have Single Page Application, but also have manageable page templates for all the different bits of the site?

App.View.Home = Backbone.View.extend({
    tagName: "article",
    id: "view-home",
    initialize: function() {
        _.bindAll(this, "render");
    },
    render: function() {

        var that = this;

        $.get("templates/home.html", function(templateHtml) {
            $(that.el).html(_.template(templateHtml));

            // we want tabs in this template too
            var tabs = new App.View.Tabs();
            $(that.el).find( #main ).html(tabs.render().el);

        }, "html");

        return that;
    },
});

I m sorry if this doesn t make much sense... I ve been trying to learn so much.

Answer 1

I don t really see anything wrong with this approach but it is difficult to say without seeing a bit more code. The important thing is not to over-think backbone too much. There are only a few things that backbone is designed to do and beyond that it s up to you to leverage that functionality as you see fit.

As for this particular issue I don t see any reason why you shouldn t do what you are doing here. I would definitely make sure that you aren t loading/fetching any data or templates before you need them. I would also make sure that you wait until you have all the data you need from the server before rendering a view (so the view doesn t load choppily). These last points are only guidelines and don t really have anything to do with backbone. But honestly that s one of the features of backbone: it does a few things well and then gets out of your way.

Answer 2

The easiest way I think is to have many views and many templates, the views being created from the controller and the templates from the view.

We have been using jqote2 for templating which works nice, we cache all the templates up front and let the data drive the app.

Each view can render the markup for a given div lets say.

Then the controller can create multiple views for example :-

App.Controllers.X = Backbone.Controller.extend({
   ....
   index: function() {
      new App.Views.View1({
         el:  div#id1,
         ...
      });
      new App.Views.View2({
         el:  div#id2,
         ...
      });
etc
   }

Hope this helps

友情链接