Backbone.js：固定侧面板的结构化应用程序

Question

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

然后，在应用程序的四个角处，中间面板周围有4个“固定”面板，这些面板在应用程序的整个生命周期内都是固定的，但包含动态更新的数据，因此需要使用骨干.js来实现。

我如何在骨干.js中构建这样的应用程序。 在路由器中每条路由内的所有侧面板实施初始渲染似乎违反了“请勿重复”规则，因为我最终会在每条路由中重复相同的渲染代码。

在这种情况下，如何组织代码，以免在多个地方重复代码。

Answer 1

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

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

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

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-task-of-the-various-pieces-of-backbone-js/

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