backbone.js - Backbonejs view binding conceptual feedback -

i ran article (http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/) , wondering if idea of binding , rendering views in router after instantiating them best practice. have been binding views , rendering them in view definition.

currently how i've been setting , calling views:

employeeview:

  employeeview = backbone.view.extend({   el: '#content',   template:template,    initialize: function () {      this.collection.fetch({       reset: true     });      this.collection.on('reset',this.render, this);   },   render: function(){     this.el.innerhtml = mustache.to_html(this.template, { employee_list: this.collection.tojson()});     console.log('render called');        } 

my router:

 employeelist: function () {     var c = new employeecollection      new employeeview( {        collection: c      });   } 

it works fine. according article better practice following:

  employeeview = backbone.view.extend({    template:template,    initialize: function () {      this.collection.fetch({       reset: true     });      this.collection.on('reset',this.render, this);   },   render: function(){     this.el.innerhtml = mustache.to_html(this.template, { employee_list: this.collection.tojson()});     console.log('render called');       return this;   } 

router

  employeelist: function () {     var c = new employeecollection     $('#content').html(new employeeview( {collection: c}).render().el);   }, 

i solution in article because decouples views other dom events article said , allows me focus tweaking , customizing in 1 place, router. because i'm passing in collection/model , need fetch data in initialize page renders twice. questions are:

1. is best practice?
2. how avoid calling render twice if want use suggested method?
3. what if have cases have front end user interaction , need refresh view collection/model? have in view or happen in router well?

the view have here, , 1 in article totally different.

in example, view bound element in dom (#content),
not practice, beginners , causes lots of bugs see here every day.

for example if create 2 instances of view event starts firing multiples times , along hell break loose.

---

the view in article creates new <div> element in memory per instance, practice.

now, add in dom, newbies stuff following inside view's render:

$('#content').html(this.$el); 

this creates global selector inside view , makes aware of outer world not practice.

the article (i didn't read it) address issue , presents , alternative of adding view element dom router, practice in opinion.

---

to avoid rendering twice in code article can do:

$('#content').html(new employeeview( {collection: c}).el); 

el being live reference, it'll updated when fetch succeeds. .render().el common mis-understanding spread existing blogs , tutorials.

---

side note: since discussing best practices, omitting semicolon , parenthesis in var c = new employeecollection not practice either. go var c = new employeecollection();