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")