nested-backbone-views-generator

Simply describe your nested web architecture in JSON and this script will generate the Backbone code corresponding (views + templates)

Introduction

The interface architecture of each web application can be represente as a tree of views. You have the main view and its childs.

The interface architecture of each Web application can be represented as a tree of views. You have the main view and its children.

An example: the Facebook’s Timeline is composed of some posts. Each post are composed by a main part: the content (img, description, …) and a subpart: the activities (comments, likes, …):

The Facebook's timeline tree of views would be:

"Content" and "Activities" are the nested views of "Post" and "Post" are the nested view of "Timeline": we have two nesting level.

With Backbone, views can manage templates to display a render. In our case just the "Content" and the "Activities" views manage templates to display their own HTML render:

Describe the tree interface

With nested-backbone-views-generator you just have to describe this tree architecture into JSON format:

{
  "name" : "Facebook_timeline", // Module name
  "children" : [
    {"name":"timeline","children":[ // Timeline view
      {"name":"post", "link" : "1-*", "type" : "view"}
    ]},
    {"name":"post", "children":[ // Post view
      {"name":"content","link":"1-1","type":"view"},
      {"name":"activities","link":"1-1","type":"view"}
    ]},
    {"name":"content","children":[ // Content view
      {"name":"content_template","link":"1-1","type":"template"} // Template to display the content
    ]},
    {"name":"comments","children":[ // Comments view
      {"name":"commentsList","link":"1-*","type":"template"}, // Template to display comments list
      {"name":"newCommentInput","link":"1-1","type":"template"} // Template to display the input form to add new comment
    ]}
  ]
}

Result

Namespace

You get the module's name space and the reference to the module's html container (el: "#timeline_container").

var Facebook_timeline = {
    Collections: {},
    Models: {},
    Views: {},
    collections: {},
    views: {},
    init: function () {
        this.views.timeline = new this.Views.timeline({
            el : '#timeline_container',
            tagName : '',
            className : '',
            model : this.model,
            collection : this.collection,
        });
        this.views.timeline.render();
    }
};

HTML Part

You get all templates that your views need + the html element container referenced into the namespace declaration + the call to the module constructor.

<script type='text/template' id='Facebook_timeline_newCommentInput_template'>
  <% model %>
</script>
 
 
<script type='text/template' id='Facebook_timeline_commentsList_template'>
  <% _.each(collection, function(model, i) { %>
      <% model %>-<% i %>
  <% }); %>
</script>
 
 
<script type='text/template' id='Facebook_timeline_content_template'>
  <% model %>
</script>
 
 
<div id="timeline_container"></div>
 
<script>
   $(document).ready(function(){
         Facebook_timeline.init();
   });
</script>