Question

引自Derick Baileys的博客（Backbone.Marionette的创建者）：

但路由器不应该实例化视图并操纵DOM 直接使用jQuery或将视图放入DOM

但我一直看到这样的代码：

var Router = Backbone.Router.extend({
    routes: {
        "":home
    },
    home: function(){
        // instance of a view object in a router
        var homeView = new HomeView({model:model});
        // do something with homeView 

    })

这可以被认为是反模式，虽然它被广泛使用？从我的角度来看，最好将 definiton 与实例化对象分开（稍后再调用 new HomeView（））。但这是否可以在路由器中找到？

Answer 1

其他人在article you are referring to的评论中提出了同样的问题。以下是Derick给出的答案，我同意，我正在复制它以保持集中。

这两个例子在功能上是相同的：

示例1

Backbone.Router.extend({
  routes: {
    "foo": "showFoo"
  },

  showFoo: function(){
    var fooView = new FooView();
    fooView.render();
    $("#someEl").html(fooView.el);
  }
});

示例2

Backbone.Router.extend({
  routes: {
    "foo": "showFoo"
  },

  showFoo: function(){
    FooApp.show();
  }
});

FooApp = {
  show: function(){
    var fooView = new FooView();
    fooView.render();
    $("#someEl").html(fooView.el);
  }
}

两者之间的区别在于耦合，内聚，封装，关注点分离和单一责任原则。如果我想改变FooApp显示应用程序视图和使其工作的方式，我不应该更改路由器。这两个问题应该分开。对于路由器和FooApp（高级应用程序对象），我应该有“改变的一个理由”。

对于小型演示应用程序，＃1没问题。但是，任何超过1或2个视图的代码都会很快变得无法维护。根据我的经验，不得不筛选所有实际显示器以便你可以看到路由器整体上做的事情。

有关这方面的更多示例，请查看我的BBCloneMail示例项目：http://github.com/derickbailey ... - 查看BBCloneMail.Router.js文件。

Answer 2

我更喜欢在router.initialize（）中初始化所有视图一次，然后只在路由方法中渲染它们。但我不认为它会产生如此大的差异。

骨干路由器的作用

2 个答案:

示例1

示例2