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

Быстрое решение (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")

Answer 3

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