web-dev-qa-db-ja.com

Backbone.js-ビューヘルパーをどこで定義しますか？

私はここ数週間、Backbone.jsのタイヤを蹴って遊んでいるので、ちょっとした質問です...

バックボーン.jsでビューヘルパーを定義して使用するための「正しい」方法は何ですか？

私が理解できる限り、テンプレートで使用するヘルパーを定義する実際の場所は、モデルまたはコレクション自体だけです。ただし、そのヘルパーが直接HTMLを返す場合、これは少し汚く感じ始めます。

もっと良い方法はありますか？

javascriptmodel-view-controllerbackbone.js
28
aaronrussell

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() ...
  }
});

ベストプラクティスが何であるか（または確立されたベストプラクティスがあるかどうか）はわかりませんが、これらのパターンはかなりクリーンでうまく機能しているようです。

42
cmpolis

クイックソリューション（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")
0
nothing-special-here

より大きなバックボーンアプリを構築するときは、おそらくすべてに名前空間を付ける必要があります。次に、グローバルヘルパーのための場所があります。私はまだ完璧な名前空間の設定をしていません。しかし、今私はこのようなことをしています：

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に配置する）オブジェクトです。前のビューイベントがすべてバインド解除され、メモリ使用量が削減されるように、常に最後のビューを削除する必要があります。

0
Mauvis Ledford