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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7293713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 23:37:34  来源:igfitidea点击:

Backbone.js - Where to define view helpers?

javascriptmodel-view-controllerbackbone.js

提问by aaronrussell

I've been kicking the tyres of Backbone.js and having a play around in recent weeks, so a bit of a noob question...

最近几周我一直在玩 Backbone.js 的轮胎并玩游戏,所以有点菜鸟问题......

What is the 'correct' way to define and use view helpers in backbone.js?

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

As far as I can work out, the only real place to define helpers to use in your templates is on the model or collection itself. However, when that helper is directly returning HTML, this begins to feel a little dirty.

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

Is there a better way?

有没有更好的办法?

回答by cmpolis

There are a few different places that I put view helpers with Backbone.js:

我在 Backbone.js 中有几个不同的地方放置了视图助手:

If the helper is specific to a certain view, put it right in the view definition:

如果 helper 特定于某个视图,请将其放在视图定义中:

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

  events: {
    ...
  },

  initialize: function() { ... },

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

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

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

If the helper will be used by all views, extend the Backbone View class so that all views inherit this function:

如果所有视图都将使用 helper,请扩展 Backbone View 类,以便所有视图都继承此函数:

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

If you need more complicated sharing of helpers between views, have views extend each other:

如果您需要在视图之间更复杂地共享助手,请让视图相互扩展:

var MyOtherView = MyView.extend({

  // ...

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

I'm not sure what is best practice (or if there is an established best practice), but these patterns seem fairly clean and work well.

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

回答by Mauvis Ledford

As you build bigger Backbone apps, you'll probably want to namespace everything. Then you will have a place for global helpers. I haven't made the perfect namespace setup yet. But right now I'm doing something like this:

当您构建更大的 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.
}

My view classes look something like this:

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

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

My controller is the object that instantiates new views (and places a reference in currentView. Remember you should always remove your last view so the previous views events all get unbinded and your reduce memory usage.

我的控制器是实例化新视图的对象(并在currentView.

回答by nothing-special-here

Quick solution (CoffeeScript)

快速解决方案(CoffeeScript)

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

Then you can use that in your view:

然后你可以在你的视图中使用它:

Yourcoolapp.Views.ThingsIndex extends Backbone.view

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

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