Question

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

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

如何在backbone.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-responsibilities-of-the-various-pieces-of-backbone-js/

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

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

1 个答案: