骨干子视图定义 - 主视图与路由器

Question

这是我的主干路由器的样子

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();
                    }
                });

            });
        }
    });
});

如您所见，有几个视图：

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

我对如何在 Backbone 中组织视图和子视图进行了大量搜索，但是它们都应该直接在视图定义中创建一个新的子视图实例，因此路由器只知道 Main查看...

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

Answer 1

路由器应该只是处理路由和初始化东西。

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

我更喜欢在 parent 视图中初始化 sub 视图，而不是在其他地方。 父母-孩子关系本身就证明了，你最好让孩子和他们的父母在一起而不是陌生人，这样他们就会受到更好的控制，你以后也可以很容易地找到他们:)

这主要是见仁见智，但问题是，如果您不这样做，您的所有代码很快就会在路由器中变得杂乱无章，而不是井井有条。

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

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

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 文件夹下。