骨干.js : 固定侧板的结构应用程序

Backbone.js : Structuring Application for fixed side panels

本文关键字：结构 应用程序 js 骨干      更新时间：2023-09-26

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

然后，在

中间面板周围的应用程序的 4 个角有 4 个"固定"面板，这些面板在应用程序的生命周期内大多是固定的，但包含动态更新的数据，因此需要使用主干实现.js

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

如何在此实例中构建代码，以便不会在多个位置重复代码。

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/

相关文章：