正确使用骨干路由器的方法？

Question

I have the current working code snippet in my backbone router...

var currentView;
var DishRoutes = Backbone.Router.extend({
  routes: {
   'dishes': 'allDishes',
   'dishes/': 'allDishes',
  },

  //Show all current dishes on path /dishes 
  allDishes: function () {
   $("#add_a_menu_link").show();
   if (currentView !== undefined) {
    currentView.remove();
   }
   $("#contentArea").empty();
   $("#contentArea").append("<div id=contents></div>");
   dishes.fetch({
    success: function () {
     console.log(dishes);
     currentView = new AllDishesView({
      collection: dishes
      //passes an x so that it will show all the views not just that specific's menus dish...
     }).render("x");
    },
    error: function () {
     console.log("couldn't find dishes:(");
    }
   });
  },

etc... There are many other routes that each have similar things going on for the backbone router.

var AllDishesView = Backbone.View.extend({
 el: "div#contents",

 initialize: function () {
  console.log(this);
  this.$el.append(this.nDish);
  this.listenTo(this.collection, "add change remove", this.render);
 },

 nDish: $("<ul id='dishlist'></ul>"),
 template: _.template($('#dishTemplate').html()),
 //Render function renders either all or within a passed in parameter...
 render: function (anID) {
  console.log(this);
  var temp = this.template;
  var newDL = this.nDish;
  newDL.empty();
  console.log(anID);
  this.$el.append($('<a href="/dishes/new"></a>'));
  dishes.forEach(function (sDish) {
   //Was this rendering passed with an id?
   var zDish = sDish.toJSON();
   if (anID === "x") {
    console.log(zDish.menu_id);
    newDL.append(temp({
     dish: zDish
    }));
    //If so show only dishes belonging to that Menu!
   } else {
    $("#contents").append($('<a id="add_a_dish_link" href="/#menus/'+anID+'/dishes/add">+ Dish</a>'));
    if (parseInt(zDish.menu_id,10) === parseInt(anID,10)) {
     newDL.append(temp({
      dish: zDish
     }));
    } else {
     console.log("NOT A MATCH!");
    }
   }
  });
  return this;
 }
});

Here is the relevant HTML portion...

<div id="contentArea">

 </div>
<script type="text/template" id="dishTemplate">
  <li>
   <a href="/#dishes/<%= dish.id %>/">
    <%- dish.name %>
   </a>
  </li>
 </script>

While this approach works in that it 100% clears whatever is in my contentArea then adds a new div contents which will contain whatever I want... I like it because it is full proof and reusable... I dislike it because it seems inefficient. I have heard recently that I should attempt to use to .detach from jQuery and then find a way to reattach it when I'd like that view to show up but I'm not sure how to do that without major scope issues...

Or if somebody knows the best practice for how to implement easily: Clear this contentArea... put in this new content have it show up on the router. With the most efficient strategy which requires the least amount of DOM re-rendering and if possible no additional fetch if I were to come back to the allDishes. Thank you!

Answer 1

Use App router only to route your application, All the data fetching has to be done in the View to keep code clean.

Just create a DishView in Your router.Don't add any logic to it, keep clean.

 allDishes: function () {
  // Your Dom operations here
  currentView = new AllDishesView({});
  // Now just create a View and attach to DOM.

  },

Now fetch your collection in your View

var AllDishesView = Backbone.View.extend({
 el: "div#contents",

     initialize: function () {
      this.$el.append(this.nDish);
      this.collection = new DishCollection();
      this.listenTo(this.collection, "add change remove sync", this.render);
      //render on collection on sync also
     },

Now the logic in approuter is minimised.
If you dont want to fect the collection every time just check for the instance of your view ,if exists just add it to the DOM. like(In router)

 allDishes: function () {
  // Your Dom operations here
  if(.isUndefined(this.currentView){ 
    this.currentView = new AllDishesView({});
  }else{
      // Just add it back to the DOM
        $("#contentArea").append(this.currentView.el)   
  }
  // Now just create a View and attach to DOM.

  },

There are many best practices and optimizations that can be added here but that will be a big list.

Note: Use deleagteEvents if you are appending view to DOM, else the view's event wont work.