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")

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

3 个答案: