javascript - Backbone .js : Structuring Application for fixed side panels

Question

我有一个应用程序，它有一个中间面板，该面板始终根据用户正在查看的应用程序的部分而变化。这些可能是消息、交易等。

然后，在中间面板周围的应用程序的 4 个 Angular 上有 4 个“固定”面板，这些面板在应用程序的生命周期内大部分是固定的，但包含动态更新的数据，因此需要使用backbone.js 来实现

如何在backbone.js中构建这样的应用程序。它似乎违背了“不重复”规则来实现路由器中每个路由中所有侧面板的初始渲染，因为我最终会在每个路由中重复相同的渲染代码。

在这种情况下如何构建我的代码，以便我不会在多个地方重复代码。

Answer 1

JavaScript 就像任何其他代码一样:如果您发现自己编写了相同的代码行，请将它们提取到函数中。如果您发现自己需要使用相同的函数，请将其(以及相关函数和数据)提取到其自己的对象中。

因此，您的路由器不应直接调用您的 View 和模型。相反，它应该委托(delegate)给可以操作您的 View 和对象的其他对象。

此外，由于每次应用程序启动时您都会设置相同的基本页面布局，因此您可能不希望在路由器中使用该代码。无论路由器是否触发，也无论哪条路由被触发，布局都会发生。有时，将布局代码放入另一个对象中也更容易，并在路由器启动之前将布局放置到位。

MyApplication = {
  layout: function(){
    var v1 = new View1();
    v1.render();
    $("something").html(v1.el);

    var v2 = new View2();
    v2.render();
    $("#another").html(v2.el);
  },

  doSomething: function(value){
    // do someething with the value
    // render another view, here
    var v3 = new View3();
    v3.render();
    $("#whatever").html(v3.el);
  }
}

MyRouter = Backbone.Router.extend({
  routes: {
    "some/route/:value": "someRoute"
  },

  someRoute: function(value){
    MyApplication.doSomething(value);
  }
});

// start it up
MyApplication.layout();

new MyRouter();

Backbone.history.start();

我写了一些与这些事情相关的文章，您可能会觉得有用:

http://lostechies.com/derickbailey/2012/02/06/3-stages-of-a-backbone-applications-startup/

http://lostechies.com/derickbailey/2011/08/30/dont-limit-your-backbone-apps-to-backbone-constructs/

http://lostechies.com/derickbailey/2011/12/27/the-responsibilities-of-the-various-pieces-of-backbone-js/

http://lostechies.com/derickbailey/2012/03/22/managing-layouts-and-nested-views-with-backbone-marionette/