Backbone.js - Gdzie zdefiniować pomocników widoku?

Question

Kopiąłem opony Backbone.js i bawiłem się w ostatnich tygodniach, więc trochę pytania noob ...

Jaki jest "poprawny" sposób definiowania i używania pomocników widoku w backbone.js?

O ile mogę się dowiedzieć, jedynym rzeczywistym miejscem do zdefiniowania pomocników do użycia w szablonach jest model lub kolekcja. Jednak gdy ten helper bezpośrednio zwraca HTML, zaczyna to być trochę brudne.

Czy istnieje lepszy sposób?

Answer 1

Istnieje kilka różnych miejsc, które kładę widoku pomocników z backbone.js:

Jeśli pomocnik jest specyficzne dla pewnej wizji, umieścić go bezpośrednio w definicji widoku:

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

    events: { 
    ... 
    }, 

    initialize: function() { ... }, 

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

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

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

Jeśli pomocnik będzie używany przez wszystkich poglądów, rozszerzyć Backbone Zobacz klasę tak, że wszystkie poglądy dziedziczą tę funkcję:

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

Jeśli potrzebujesz bardziej skomplikowaną wymianę poglądów między pomocników, roztacza się rozciągać siebie:

var MyOtherView = MyView.extend({ 

    // ... 

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

Nie jestem pewien, co jest najlepsze praktyki (lub jeśli istnieje stała najlepsze praktyki), ale te wzory wydają się dość czyste i działają dobrze.

Answer 2

Podczas tworzenia większych aplikacji szkieletowych prawdopodobnie będziesz potrzebować przestrzeni nazw. Wtedy będziesz mieć miejsce dla globalnych pomocników. Jeszcze nie stworzyłem idealnego ustawienia przestrzeni nazw. Ale teraz robię coś takiego:

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

moim zdaniem zajęcia wyglądać tak:

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

Moje kontroler jest obiektem, który tworzy wystąpienie nowych widoków (i umieszcza odniesienie w currentView. Pamiętaj, zawsze należy usunąć ostatni pogląd więc poprzednich odsłon wydarzeń wszyscy się unbinded i twój zmniejszyć zużycie pamięci.

Answer 3

Szybkie rozwiązanie (coffeescript)

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

Następnie można użyć, które Państwa zdaniem:

Yourcoolapp.Views.ThingsIndex extends Backbone.view 

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

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