javascript - template - Backbone.js-¿Dónde definir view helpers?

underscore js que es

Question

He estado pateando los neumáticos de Backbone.js y teniendo un juego en las últimas semanas, así que un poco de una pregunta de novato ...

¿Cuál es la forma "correcta" de definir y usar los ayudantes de visualización en backbone.js?

Por lo que puedo decir, el único lugar real para definir ayudantes para usar en sus plantillas está en el modelo o colección en sí. Sin embargo, cuando ese ayudante devuelve directamente HTML, esto comienza a sentirse un poco sucio.

¿Hay una mejor manera?

Answer 1

A medida que construyas aplicaciones Backbone más grandes, probablemente quieras ponerle nombre a todo. Entonces tendrás un lugar para ayudantes globales. No he hecho la configuración perfecta del espacio de nombres todavía. Pero ahora estoy haciendo algo como esto:

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.
}

Mis clases de vista se ven algo como esto:

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

Mi controlador es el objeto que currentView una instancia de las nuevas vistas (y coloca una referencia en currentView . Recuerde que siempre debe eliminar su última vista para que los eventos de las vistas anteriores se separen y reduzca el uso de la memoria.

Answer 2

Hay algunos lugares diferentes que puse view helpers con Backbone.js:

Si el helper es específico para una determinada vista, póngalo en la definición de la vista:

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

  events: {
    ...
  },

  initialize: function() { ... },

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

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

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

Si todas las vistas usarán el asistente, amplíe la clase Backbone View para que todas las vistas hereden esta función:

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

Si necesita compartir más complicado de ayudantes entre vistas, haga que las vistas se extiendan entre sí:

var MyOtherView = MyView.extend({

  // ...

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

No estoy seguro de cuál es la mejor práctica (o si existe una mejor práctica establecida), pero estos patrones parecen bastante limpios y funcionan bien.

Answer 3

Solución rápida (CoffeeScript)

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

Entonces puedes usar eso en tu vista:

Yourcoolapp.Views.ThingsIndex extends Backbone.view

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

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