Backbone.js - ¿Dónde definir ver ayudantes?

Question

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

¿Cuál es la forma "correcta" de definir y usar ver ayuda en backbone.js?

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

¿Hay una manera mejor?

Answer 1

Hay unos pocos lugares diferentes que puse ayudantes de vista con Backbone.js:

Si el ayudante es específico para un determinado punto de vista, lo puso justo en la definición de vista:

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

    events: { 
    ... 
    }, 

    initialize: function() { ... }, 

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

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

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

Si el ayudante será utilizada por todas las vistas, extender la clase Backbone Ver de manera que todas las vistas heredan esta función:

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

Si necesita más complicado intercambio de puntos de vista entre los ayudantes, tienen puntos de vista se extienden entre sí:

var MyOtherView = MyView.extend({ 

    // ... 

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

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

Answer 2

A medida que crea aplicaciones Backbone más grandes, es probable que desee espacio de nombres todo. Entonces tendrás un lugar para ayudantes globales. No he hecho la configuración perfecta del espacio de nombres todavía. Pero en este momento 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. 
} 

mi opinión clases tienen el siguiente aspecto:

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

Mi controlador es el objeto que crea la instancia de nuevos puntos de vista (y coloca una referencia en currentView. Recuerde que usted debería quitarse siempre el último punto de vista por lo que los eventos anteriores visitas todos nos unbinded y reducir el uso de su memoria.

Answer 3

solución rápida (CoffeeScript)

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

entonces puedes usar eso en su vista:

Yourcoolapp.Views.ThingsIndex extends Backbone.view 

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

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