Backbone.js - Où pour définir les aides de vue?

J'ai été des coups de pied les pneus de Backbone.js et avoir un jeu autour de ces dernières semaines, donc un peu d'une question de noob...

Quelle est la "bonne" façon de définir et d'utiliser des aides de vue en backbone.js?

Aussi loin que je peux travailler, le seul véritable lieu de définir les aides à utiliser dans les templates de votre site est sur le modèle ou la collection elle-même. Toutefois, lorsque cette aide est directement retour HTML, cela commence à sentir un peu sale.

Est-il un meilleur moyen?

InformationsquelleAutor aaronrussell | 2011-09-03
  1. 42

    Il y a peu d'endroits différents que j'ai mis des aides de vue avec Backbone.js:

    Si l'aide est spécifique à un certain point de vue, le mettre à droite dans la définition de la vue:

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

  events: {
    ...
  },

  initialize: function() { ... },

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

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

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

    Si l'aide sera utilisée par tous les points de vue, d'étendre l'épine Dorsale de Vue de classe, de sorte que tous les points de vue hériter de cette fonction:

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

    Si vous avez besoin de plus complexes de partage des aides entre les points de vue, ont la vue s'étend sur les uns des autres:

    var MyOtherView = MyView.extend({

  //...

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

    Je ne suis pas sûr de ce qui est la meilleure pratique (ou, si ce n'est une meilleure pratique établie), mais ces modèles semblent assez propre et fonctionne bien.

    • Il est également possible de faire Mixin (c'est à dire la classe "mixin" méthodes à partir d'une collection de classes) et le même aspect-oriented programming (avoir un seul appel de fonction remplacer une collection de classes, l'enveloppant d'un objectif de la méthode avec une autre méthode).
    • +1 pour l'extension de la colonne vertébrale Vue de la classe
    • Hmm, à l'aide de this dans extend ne fonctionne pas pour moi, mais this.__proto__ a fait un travail. Ne devrait pas __proto__ méthodes de travail avec this? Par exemple this.myMethod() par opposition à this.__proto__.myMethod(). Pour moi, les dernières œuvres, mais l'ancien échoue.
    • Merci pour cette, maintenant que je sais comment étendre l'épine dorsale de vue de classe, je peux enlever mon montant ridicule de fonctions redondantes.
    • génial, j'ai trouvé moi-même écrit beaucoup de doublons de fonctions d'aide, et je vais certainement utiliser la deuxième méthode, mais pouvez-vous donner un exemple où vous pouvez utiliser la troisième méthode vous a montré?
    InformationsquelleAutor cmpolis
  2. 0

    Que vous construisez plus grande épine Dorsale des applications, vous aurez probablement envie de tout l'espace de noms. Ensuite, vous aurez une place pour le mondial aides. Je n'ai pas fait le parfait espace de noms configuration encore. Mais pour l'instant je suis en train de faire quelque chose comme ceci:

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

    Mon point de vue, les classes de ressembler à quelque chose comme ceci:

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

    Mon contrôleur est l'objet qui instancie de nouveaux points de vue (et des lieux de référence dans currentView. Pensez à toujours enlever votre dernière vue de sorte que le point de vue précédent les événements de tous les obtenir unbinded et votre de réduire l'utilisation de la mémoire.

    InformationsquelleAutor Mauvis Ledford
  3. 0

    Solution rapide (CoffeeScript)

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

    Ensuite, vous pouvez l'utiliser à votre avis:

    Yourcoolapp.Views.ThingsIndex extends Backbone.view

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

  someMethod: =>
    @template = this.handlebarsTemplate("#hb_other")
    InformationsquelleAutor nothing-special-here