Backbone.js - 在哪里定义视图助手？

Question

最近几周我一直在尝试 Backbone.js 并进行尝试，所以有点菜鸟问题......

在backbone.js 中定义和使用视图助手的“正确”方法是什么？

据我所知，定义在模板中使用的助手的唯一真正位置是模型或集合本身。然而，当该帮助器直接返回 HTML 时，这开始感觉有点脏。

有更好的办法吗？

Answer 1

我在 Backbone.js 中放置视图助手的几个不同位置：

如果该助手特定于某个视图，请将其放在视图定义中的右侧：

var MyView = Backbone.View.extend({
  tagName: 'div',

  events: {
    ...
  },

  initialize: function() { ... },

  helperOne: function() {
    // Helper code
  },

  anotherHelper: function() {
    // Helper code
  },

  render: function() { 
    ... this.helperOne() ...
  }
});

如果将使用该助手通过所有视图，扩展 Backbone View 类，以便所有视图继承此功能：

_.extend(Backbone.View.prototype, {
  helper: function() {
    // Helper code
  }
}

如果您需要在视图之间共享更复杂的助手，请让视图相互扩展：

var MyOtherView = MyView.extend({

  // ...

  render: function() { 
    ... this.helperOne() ...
  }
});

我不确定什么是最佳实践（或者是否有既定的最佳实践）实践），但这些模式看起来相当干净并且运行良好。

Answer 2

当您构建更大的 Backbone 应用程序时，您可能希望为所有内容命名。然后你就会有一个全球助手的位置。我还没有完成完美的命名空间设置。但现在我正在做这样的事情：

brainswap:{
  appView: {},          <== Reference to instantiated AppView class.
  classes = {           <== Namespace for all custom Backbone classes.
    views : {},
    models : {},
    collections: {},
    controllers : {},
    Router: null
  },
  models: {},          <== Instantiated models.
  controllers: {},     <== Instantiated controllers.
  router: {},          <== Instantiated routers.
  helpers: {},         <== Reusable helper platform methods.
  currentView: {},     <== A reference to the current view so that we can destroy it.
  init: function(){}   <== Bootstrap code to start app.
}

我的视图类看起来像这样：

brainswap.classes.views.profile.contact = brainswap.classes.views.profile.base.extend({...

我的控制器是实例化新视图的对象（并在 currentView 中放置一个引用。记住，您应该始终删除最后一个视图）视图，以便以前的视图事件全部解除绑定，并减少内存使用量。

Answer 3

快速解决方案（CoffeeScript）

Backbone.View::handlebarsTemplate = (templateName) ->
  Handlebars.compile $(templateName).html()

然后您可以在您的视图中使用它：

Yourcoolapp.Views.ThingsIndex extends Backbone.view

  initialize: ->
    @template = this.handlebarsTemplate("#hb_template")
    # etc...

  someMethod: =>
    @template = this.handlebarsTemplate("#hb_other")