0

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

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

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

在这种情况下，我如何构造我的代码，以免在多个地方重复代码。

4

1 回答 1

3

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

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

于 2012-04-16T12:30:50.887 回答