4

我想知道在哪里放置常见的主干视图代码。例如，我的“NewPosts”视图中有以下内容：

  createPost: (event) ->
    #...
    @collection.create attributes,
      #...
      error: @handleError


  handleError: (entry, response) ->
    if response.status == 422
      #...

该handleError 函数将在许多不同的视图中使用......我不确定最佳实践：将其放置在哪里。是否有一个相当于视图助手的主干，我可以把它放进去？还有其他攻击方式吗？

4

4 回答 4

4

注意：我的 CoffeeScript 生锈了，所以我在 JS 中回答这个问题，但这个想法应该翻译。

显然，解决这个问题的一种方法是给你所有的视图一个父类，然后在那个类中放置像handleError这样的方法。但是，如果您正在寻找一种更像“mixin”的添加方法的方式，您也可以这样做。

骨干视图使用 extend 方法的参数初始化，如下所示：

var MyView = Backbone.View.extend({
    someMethod: function(){ doSomething();}
});

这个论点并不神奇。它只是一个 JS 对象，因此您可以使用 _.extend 对其进行扩展，如下所示：

var myCommonMethods = {
    handleError: function ...
}

var MyView = Backbone.View.extend(_({
    someMethod: function(){ doSomething();}
}, myCommonMethods));

这种方法的优点是您可以根据需要“混入”尽可能多的方法集，而如果您使用父类，则会受到更多限制。父类方法虽然更简单：

var BaseView = {
    handleError: function ...
}

var MyView = BaseView.extend({
    someMethod: function(){ doSomething();}
});

所以这真的取决于你的特殊需求。

就我个人而言，在我的代码中，我使用了这两种方法：我有一个 BaseView，我的所有视图都扩展了它，并且我将极其常见的逻辑（比如我们的大多数视图使用的模板系统）放入其中。然后我有各种方法集的“混合”，这些方法集添加了额外的功能。

例如，我为所有以“select”元素作为 el 的视图混合了一组方法；这让那些视图拥有对它们有意义的任何基类，但仍然有一组通用的方法（例如，它们都有一个 selectOption 方法，它让我可以在视图的 el 中为特定选项添加“selected”属性）。希望有帮助。

于 2012-10-27T00:48:16.853 回答
2

您可以通过以下几种方式执行此操作：使用此方法定义基本视图，然后从此视图扩展所有其他视图，而不是 Backbone.View

var Base = Backbone.View.extend({
    handleError:function() {...}
});

var MyView = Base.extend({ ... });

或者，使用助手扩展现有视图

var Helper = {
    handleError:function() {...}
};

var View1 = Backbone.View.extend({ ... });
var View2 = Backbone.View.extend({ ... });
$.extend(View1, Helper);    
$.extend(View2, Helper);
于 2012-10-27T00:47:58.647 回答
1

抱歉没有代码示例，但重构的概念之一是将通用代码移至基类，以便所有子类都可以重用代码。

但我真的很喜欢 Rimian 的想法，您的视图从对象或调度程序等事件源订阅错误事件。然后，这将使您的所有视图彼此分离，并在收到错误事件时处理错误。

于 2012-10-27T06:22:48.997 回答
1

我将实现一个侦听事件的错误处理模型。您可以制作自己的自定义事件或使用默认值。我构建了一个大型复杂的backbone.js 应用程序，在我学会利用事件模型之前，它的架构非常困难。它节省了很多处理关注点之间的关系。

创建一个事件分派器，并在初始化时将其作为参数传递给视图：

像这样的东西：

var dispatcher = {};

_.extend(dispatcher, Backbone.Events);

dispatcher.on("event", function(msg) {
  // delegate to error handler
});


view = new View([dispatcher: dispatcher])
view.dispatcher.trigger('event', {})

我发现通过使用事件调度器，它隔离了我的视图、集合和模型，这使得测试变得非常容易。我可以在 chrome 的控制台中触发事件，然后观察各个组件是如何独立运行的。通过将调度程序暴露给记录器，它使调试变得更加容易并且我的代码更清晰。

于 2012-10-27T01:02:00.590 回答