3

我已经使用 Backbone.js 和 Require.js 启动了一个 JavaScript 应用程序。该应用程序显示不同的顶级视图 - 搜索项目、编辑项目的不同方面、将项目相互连接。每个视图都以独占方式显示。

路由器模块的文件如下所示：

define([
  'backbone',
  'myapp' 
  'views/search',
  'views/edit1', 
  'views/edit2', 
  'views/connect'], 
function(Backbone, App, SearchView, EditView1, Editview2, ConnectView) {

  return Backbone.Router.extend({
    routes: {
      "search": "doSearch",
      "edit1":  "doEdit1",
      // more routes here
    },
    doSearch: function() {
      App.main.show(new SearchView()); // Marionette.js regions
    },
    doEditView1: function() {
      App.main.show(new EditView1());
    },
    // etc.
  });
});

在我的代码中有更多的视图。有没有办法减少对一个对象的长需求视图列表？也许通过其他架构或一些 require.js 技巧？

也许我受 Symfony 2 关于“路由器”概念的影响太大了？

4

2 回答 2

1

我自己一直在思考这个问题。

一个简单的解决方案是定义一个包含所有视图的模块，然后将其作为依赖项包含在内：

意见/all.js

define([
  'views/search',
  'views/edit1', 
  'views/edit2', 
  'views/connect'], 
function(SearchView, EditView1, EditView2, ConnectView) {

    return {
      "EditView1": EditView1,
      "EditView2": EditView2,
      "ConnectView": ConnectView
      "SearchView": SearchView
    };
});

然后在您的路由器模块中，您可以包含 views/all 作为分配给变量的依赖项Views，并将任何视图称为Views.EditView1、Views.EditView2等：

define([
  'backbone',
  'myapp', 
  'views/all'], 
function(Backbone, App, Views) {
  ...

  doSearch: function() {
    App.main.show(new Views.SearchView());
  },

  ...
});

我从来没有真正尝试过这个，但我认为它会工作。

于 2012-11-05T13:13:17.673 回答
1

在语法层面上，Require.js 还支持“简化的 CommonJS 包装”。显然，这不能帮助您避免冗长的依赖项列表（正如@shioyama 的建议所做的那样），但可以最大限度地减少依赖项名称与命名函数参数不匹配的风险，并有助于保持整洁（呃）。

于 2012-11-09T02:07:04.747 回答