Backbone.js - Где определить помощников вида?

Я пинал шины Backbone.js и играю в последние недели, поэтому немного вопрос о нобе...

Что такое "правильный" способ определения и использования помощников вида в backbone.js?

Насколько я могу решить, единственное реальное место, где можно определить помощников для использования в ваших шаблонах, - это сама модель или коллекция. Однако, когда этот помощник напрямую возвращает HTML, это начинает чувствовать себя немного грязным.

Есть ли лучший способ?

Ответы

Ответ 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() ...
  }
});

Я не уверен, что является лучшей практикой (или если существует установленная передовая практика), но эти шаблоны кажутся довольно чистыми и хорошо работают.

Ответ 2

По мере того, как вы создаете более крупные серверные приложения, вы, вероятно, захотите пропустить все пространство. Тогда у вас будет место для глобальных помощников. Я еще не создал идеальную настройку пространства имен. Но сейчас я делаю что-то вроде этого:

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). Помните, что вы всегда должны удалять свой последний вид, чтобы все предыдущие просмотры событий становились unbinded и уменьшали использование памяти.

Ответ 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")