javascript - 主干 subview 定义 - 主视图与路由器

Question

这是我的 Backbone 路由器的样子

define([
    "jquery",
    "underscore",
    "backbone"
], function ($, _, Backbone) {

    return Backbone.Router.extend({
        routes: {
            "overview": "overview"
        },

        overview: function () {
            require([
                "views/overview",
                "models/user-collection",
                "grid",
                "spreadsheet"
            ], function (OverviewView, TestCollection, GridView, SpreadSheetView) {
                // Data
                var collection = new TestCollection();

                // Main view
                var view = new OverviewView({
                    el: "#page",
                    collection: collection
                });

                // Sub view #1
                var gridView = new GridView({
                    el: "#backgridWrapper"
                });

                // Sub View #2
                var spreadsheetView = new SpreadSheetView({
                    el: "#handsontableWrapper"
                });

                // Flow
                collection.fetch({
                    success: function () {
                        view.render();
                        gridView.render();
                        spreadsheetView.render();
                    }
                });

            });
        }
    });
});

如您所见，有几种 View :

1. 主视图
2. subview #1
3. subview #2

我已经做了很多关于如何在 Backbone 中组织 View 和 subview 的搜索，但是所有这些都应该直接在 View 定义中创建一个新的 subview 实例，以便路由器只知道 Main查看...

所以问题是 - 在路由器上处理 subview 而不是直接在 View 构造函数中处理 subview 是个好主意吗？

Answer 1

路由器应该只处理路由和初始化内容。

诸如获取数据之类的事情应该放在使用它的 View 中 - View 显示数据或错误消息(如果发生故障)，所以我认为让 View 获取数据而不是某些路由器来获取数据是明智的对路线感兴趣，对数据不感兴趣。

而且我更喜欢在其父 View 内初始化子 View ，而不是其他地方。 亲子关系本身就证明，你最好让 child 和他们的 parent 在一起，而不是让 child 和陌生人在一起，这样他们会受到更好的控制，并且你以后也可以轻松找到他们:)

这主要是一个观点问题，但问题是如果你不这样做，你的所有代码很快就会在路由器中变得困惑而不是组织良好。

下面是我将如何构建同样的东西。

请注意，我将初始化 subview 作为父 View 渲染方法的一部分。这可以在初始化父 View 时完成，但我认为这样做没有意义，除非父 View 成功获取数据并继续渲染自身。

define([
  "jquery",
  "underscore",
  "backbone"
], function($, _, Backbone) {

  return Backbone.Router.extend({
    routes: {
      "overview": "overview"
    },
    overview: function() {
      require(["views/overview"], function(OverviewView) {
        // initialize Main view
        var view = new OverviewView({
          el: "#page"
        });
      });
    }
  });
});

define([
  "jquery",
  "underscore",
  "backbone",
  "models/user-collection",
  "grid",
  "spreadsheet"
], function($, _, Backbone, TestCollection, GridView, SpreadSheetView) {

  return Backbone.View.extend({
    initialize: function(options) {
      this.collection = new TestCollection();
      this.fetchData();
    },
    events: {},
    render: function() {
      // rendering subviews is part of rendering their parent view.
      //I prefer to do that here

      // Sub view #1
      this.gridView = new GridView({
        el: "#backgridWrapper"
      });
      // Sub View #2
      this.spreadsheetView = new SpreadSheetView({
        el: "#handsontableWrapper"
      });
     //Below lines can be handled while initializing the respective view 
     // (In their initialize() method, or after fetching some data etc
     // or can be chained with the above initialization if their render() method returns a reference to itself (`return this`)
      this.gridView.render();
      this.spreadsheetView.render();
    },
    fetchData: function() {
      var view = this;
      this.collection.fetch({
        success: function() {
          view.render();
        }
      });
    }
  });
});

旁注:我强烈建议不要将集合放在 models 文件夹下。