backbone路由器的正确使用方法？

Question

我的 backbone 路由器中有当前可用的代码片段...

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:(");
    }
   });
  },

等等...还有许多其他路由，每个路由都有类似的事情发生在 backbone 路由器上。

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;
 }
});

这是相关的 HTML 部分...

<div id="contentArea">

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

虽然这种方法的工作原理是它 100% 清除我的 contentArea 中的任何内容，然后添加一个新的 div 内容，其中将包含我想要的任何内容...我喜欢它，因为它是完全证明和可重用的。 .. 我不喜欢它，因为它看起来效率低下。我最近听说我应该尝试使用 jQuery 中的 .detach ，然后在我希望显示该视图时找到一种重新附加它的方法，但我不确定该怎么做没有重大范围问题...

或者如果有人知道如何轻松实施的最佳实践：清除此内容区域... 放入这个新内容让它显示在路由器上。使用最有效的策略，需要最少的 DOM 重新渲染，并且如果可能的话，如果我要返回 allDishes，则无需额外获取。谢谢！

Answer 1

仅使用 App router 来路由您的应用程序，所有数据获取都必须在视图中完成以保持代码整洁。

只需在您的 router.Don 中创建一个 DishView，不要向其中添加任何逻辑，保持清洁。

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

  },

现在在您的视图中获取您的collection

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
     },

现在审批程序中的逻辑被最小化了。
如果您不想每次都感染 collection，只需检查您的视图实例，如果存在，只需将其添加到 DOM。喜欢（在路由器中）

 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.

  },

可以在此处添加许多最佳实践和优化，但这将是一个很大的列表。

注意：如果要将视图附加到 DOM，请使用 deleagteEvents，否则视图的事件将不起作用。

backbone路由器的正确使用方法？

Proper way to use backbone router?

javascript

sqlite

optimization

jquery

backbone.js