Backbone.js: Wo setze ich mein jQuery-Setup?

Question

Ich bin mit Backbone.js vertraut, aber eine Sache, die ich nicht verstehe, ist, wo ich den einmaligen jQuery-Code, den ich brauche, um meine Seite einzurichten.

Sie kennen die Art der Sache: Konfigurieren eines jQuery Karussell-Plugins, Hinzufügen eines 'nach oben scrollen' Pfeils ... die einmalige Konfiguration, die beim ersten Laden der Seite durch den Benutzer passiert.

Im Moment habe ich es in meinem Router so mache:

var AppRouter = Backbone.Router.extend({ 
    routes: { 
    // some routes 
    }, 
    initialize: function() { 
    initializeJqueryStuff(); 
    } ... 
}); 
var StateApp = new AppRouter(); 
Backbone.history.start({ 
    pushState: true 
}); 
function initializeJqueryStuff() { 
    // one-off jQuery stuff goes here 
} 

Yeuch. Wie soll ich es machen? Sollte initializeJqueryStuff eine andere Eigenschaft des Router-Objekts sein? Sollte alles nur innerhalb initialize leben? Oder sollte ich diesen Code wirklich getrennt von der Backbone-App behalten?

Answer 1

Normalerweise definiere ich eine LayoutView, d. H. Eine Stammansicht, die für das Rendern aller "tatsächlichen" Ansichten in der Anwendung verantwortlich ist. Diese Layoutansicht wird nur einmal initialisiert, bevor ein anderer Ansichtscode ausgeführt werden muss. Es ist auch, wo ich dazu tendiere, einmalige Konfigurationen zu machen.

Probe:

//LayoutView should be considered a singleton, only initialized once 
var LayoutView = Backbone.View.extend({ 
    el:'body', 

    initialize: function() { 
     this.initializeSomejQueryStuff(); 
    }, 

    renderChild: function(child) { 
     if(this._currentChild) 
      this._currentChild.remove(); 
     this._currentChild = child; 
     this.$el.html(child.render().el); 
    }, 

    initializeSomejQueryStuff: function() { 
     //init here 
    } 
}); 

Verbrauch:

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     "foo/:id": "foo" 
    }, 

    initialize: function() { 
     this.layout = new LayoutView(); 
    }, 

    foo: function(id) { 
     var model = new Foo({id:id}); 
     var view = new FooView({model:model}); 

     //delegate the view rendering to a layout 
     this.layout.renderChild(view); 
    } 
}); 

Answer 2

Hmm ... Entschuldigung, wenn ich bei meinem schlechten Englisch einige Details verpasse. Aber wie ich den Hauptpunkt Ihrer Frage sehen kann: Wo können Sie jQuery-Sachen konfigurieren und platzieren, die nicht mit Backbone verbunden sind? In allen können Sie diesen Code trennen und einfach in .HTML

Backbone nur kleine MVC. Sie können Ihre Render-Funktionen und einige js Sachen mit Ansichten in Backbone.View.extend({...}) zu manipulieren, aber in allem, denke ich, es ist ein guter Punkt, um verschiedene Struktur für andere Sache zu machen. smth wie folgt aus:

.../ 
    public/ 
     css/ 
     img/ 
     lib/ 
      ..any source code for your plugins.. 
     tpl/ 
      ..for your templates.. 
     js/ 
      models/ 
       models.js 
      views/ 
       ..your views.js.. 
      main.js(your backbone router and for example, .loadTemplate() func for templates and other) 
      ..any code for plugings configuration.. 

So Wie Ich denke, dass Struktur zu verstehen helfen, was Quelle ist, was und Sie klare Codierung nehmen.

Ich hoffe, es war hilfreich für Sie. Entschuldigung, wenn ich etwas falsch verstehe.