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

            });
        }
    });
});

正如您所看到的，有几种观点：

主视图
子视图＃1
子视图＃2

我已经做了很多关于如何在Backbone中组织视图和子视图的搜索，但是所有这些都应该直接在视图定义中创建一个新的子视图实例，这样路由器才能知道Main视图...

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

Answer 1

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

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

我更喜欢在父视图中初始化子视图，而不是在其他地方。 父母 - 孩子关系本身证明了这一点，你最好让孩子与父母保持比陌生人更好，这样他们就能得到更好的控制，你也可以在以后轻松找到它们。）

大多数情况下，这是一个意见问题，但问题是，如果你不这样做，你的所有代码很快就会在路由器中混乱，而不是组织得很好。

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

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

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文件夹下放置一个集合。

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

1 个答案: