backbone.js - Nerede görünüm yardımcıları tanımlamak için?

Question

Backbone.js'nin lastiklerini tekmelemek ve son haftalarda bir oyun oynamak zorunda kaldım, bu yüzden bir kaç soru ...

Görüntü yardımcılarını tanımlamak ve kullanmak için 'doğru' yol nedir? backbone.js?

Bildiğim kadarıyla halledebiliriz gibi şablonlarınızda kullanmak yardımcıları tanımlamak için tek gerçek yer model veya koleksiyonla kendisi üzerindedir. Ancak, bu yardımcı doğrudan HTML döndürdüğünde, bu biraz kirli hissetmeye başlar.

Daha iyi bir yolu var mı?

Answer 1

Ben backbone.js ile görünüm yardımcıları koymak birkaç farklı yerde vardır: yardımcı belli görünüme özgüdür

ise sağ görünüm tanımında koydu:

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

    events: { 
    ... 
    }, 

    initialize: function() { ... }, 

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

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

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

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

01: yardımcı tüm görünümlerde tarafından kullanılacaksa tüm görünümler bu işlevi devralması için

, Backbone görüntüle sınıfını genişletmek (Veya kurulu bir iyi uygulama varsa)

var MyOtherView = MyView.extend({ 

    // ... 

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

Ben en iyi yöntem ne olduğundan emin değilim, ama bu:

sen görünümler arasında yardımcılarından daha karmaşık paylaşımını gerekiyorsa, sahip görüşlerin birbirini uzatmak desenler oldukça temiz görünüyor ve iyi çalışıyor. Eğer daha büyük Omurga uygulamaları oluşturmak üzere

Answer 2

, muhtemelen her şeyi ad alanı isteyeceksiniz. O zaman küresel yardımcılar için bir yer olacak. Henüz mükemmel ad alanı kurulumunu yapmadım. Ama şu anda böyle bir şey yapıyorum:

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

Bence sınıfları şuna benzer:

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

Benim kontrolör yeni görünümler başlatır (ve currentView bir başvuru yerleştirir nesnedir. Eğer her zaman tüm unbinded olsun önceki görünümler olaylar böylece son görünümünü kaldırmak ve sizin bellek kullanımını azaltmak gerektiğini unutmayın.

Answer 3

Hızlı çözeltisi (CoffeeScript)

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

Sonra görünümde o kullanabilirsiniz:

Yourcoolapp.Views.ThingsIndex extends Backbone.view 

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

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