Backbone.js & require.js:Wie transformiere ich meine Modelle, Ansichten und Sammlungen in require.js-Module?

StackOverflow https://stackoverflow.com/questions/7353151

Frage

Ich arbeite an einer Javascript-App mit backbone.js. Um die Entwicklung zu vereinfachen, strukturiere ich meine Dateien jedoch auf diese Weise

app
 |
 + views
 |    L movieRow.js
 |    L movieDetail.js
 |
 + models
 |    L movie.js
 |    L tvshow.js
 |
 + collections
 |    L movies.js
 |    L tvshows.js
 |
 + templates
 |    L movieList.tpl
 |    L movieDetail.tpl
 |    L applicationUI.tpl
 |
 L application.js

Nun, das sind viele Javascript-Dateien, die für den Benutzer auf dem Server bereitgestellt werden müssen. Ich sehe einige Gerüchte über labjs oder require.js und habe beschlossen, damit herumzuprobieren.Aber ich habe keine Ahnung, wie ich alle meine Backbone-Modelle oder Ansichten in diese require.js-Module umschreiben würde.

Jede Hilfe in die richtige Richtung wäre nett.

War es hilfreich?

Lösung

Der Schlüssel zum Verständnis erfordert (zumindest in meinem kleinen Gehirn), dass das, was Sie aus der Funktion zurückkehren, anderen Modulen zur Verfügung stehen, die dieses Modul einziehen (oder erfordern). In dem folgenden Code brauche ich JQuery und Backbone (JQuery ist ein Sonderfall, der von "Required-Jquery" behandelt wird). Wenn diese 2 verfügbar sind, wird meine Funktion aufgerufen und diese Funktion gibt den von mir erstellten Ansichtskonstruktor zurück.

define([    
    'jquery'
    'libraries/backbone'
], function ($) {
        var MovieRow = Backbone.View.extend({
            render: function () {

                return this;
            }
        });

        return MovieRow;
});

Dann können Sie so etwas auf Ihre Seite schreiben. Beachten Sie, dass JQuery das erste erforderliche Element im Array ist. Dies entspricht dem ersten Parameter in meiner Funktion. Die Ansicht ist 2. und das Modell ist 3.. Dann kann ich den Rückgabewert aus meinem "Define" -Code oben verwenden, in dem der Konstruktor ist.

require({
    baseUrl: '/'
},[
    'jquery',
    'app/views/movieRow',
    'app/models/movie',
    'libraries/backbone'
], 
function ($, MovieRowView, Movie) {
    var view = new MovieRowView({model : new Movie());
    $('body').append(view.render().el);        
});

Hoffe das ist hilfreich ... Wir haben das Rückgrat geliebt und benötigen :)

Andere Tipps

Mir ist in den Kommentaren der Platz ausgegangen und ich wollte etwas Code einfügen, deshalb erstelle ich eine zweite Antwort:

Was @timDunham gepostet hat, ist größtenteils ziemlich gut, obwohl ich ein paar Extras habe, auf die jemand zum besseren Verständnis eingehen könnte.

Im Code:

define([    
    'jquery'
    'libraries/backbone'
]

Ich glaube, der Unterstrich fehlt.Erstens benötigt Backbone Underscore, um zu funktionieren, und ohne es würde es meiner Meinung nach kaputt gehen.Zweitens unterstützen diese AMD nicht, es sei denn, Sie verwenden den AMDJS-Zweig von Underscore und Backbone.Unterstrich AMD-Unterstützung mit v1.3.0 ENTFERNT.Wenn wir davon ausgehen, dass wir Unterstriche und Backbones verwenden, die nicht von AMD stammen, gehören sie wahrscheinlich nicht dazu define[] und sollte sein require[] stattdessen.

Die richtige Definition würde also etwa so aussehen, WENN Sie die AMDJS-Versionen richtig verwenden:

define([    
    'jquery',
    'underscore',
    'Backbone'
], function($, _, Backbone) { ... });

Dies setzt voraus, dass ich die Pfade in der erforderlichen Konfiguration erstellt habe:

require.config({
    paths : {
        jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
        underscore : '../../libs/js/underscore/underscore.min',
        Backbone : '../../libs/js/backbone/backbone',
    }
});

Ich habe einige Implementierungen gesehen, die nicht die AMDJS-Versionen verwenden, und da es sich dabei nicht um asynchrone Module handelt, muss man sicherstellen, dass sie in der richtigen Reihenfolge geladen werden.

Ich glaube, dass dies NICHT die richtige Reihenfolge beim Laden von Abhängigkeiten garantiert:

require({
    baseUrl: '/'
},[
    'jquery',
    'app/views/movieRow',
    'app/models/movie',
    'libraries/backbone'
],

Da etwas als Abhängigkeit aufgeführt ist, heißt das nicht, dass es bei Bedarf geladen wird.Bei asynchronen Modulen ist das kein Problem, aber in diesem Beispiel habe ich es nicht erwähnt gesehen, also gehen wir davon aus, dass es sich nicht um AMD handelt.Dieses Modul HÄNGT von jquery, movieRow, movie und backbone ab.Aber wenn Backbone versucht, vor JQuery zu laden ...(x_x) Warum in der Welt, warum?

Aus diesem Grund glaube ich, dass require.js ein Plugin namens order! hat.zur Rettung.Mit bestellen!Sie können Ihre Abhängigkeiten einrichten und die Skripte werden geladen ...Also...Befehl.Etwas wie das:

require({
    baseUrl: '/'
},[
    'order!jquery',
    'app/views/movieRow',
    'app/models/movie',
    'order!libraries/underscore',  // <- Don't forget me!
    'order!libraries/backbone'
]

Ich glaube, dass Ihr Modul damit auswertet und garantiert, dass zuerst jquery geladen wird, dann der Unterstrich und dann das Backbone.Keine Garantien für movieRow oder movie, aber wen interessiert das in diesem Fall?:-)

Ich verwende für mein Projekt die Forks AMDJS-Backbone und AMDJS-Underscore, daher füge ich sie normalerweise in die ein define[] und es funktioniert ohne Probleme.RequireJS ist wirklich großartig und hat meinen Code erheblich aufgeräumt.Überall, wo ich hingehe, taucht JRBurke, der Autor von RequireJS, überall auf und er ist immer überaus hilfreich mit seinen Kommentaren zu allem, was require.js betrifft.Und ich meine alles.Meine Theorie ist, dass er telepathisch mit Require verbunden ist und jedes Mal, wenn eine neue Instanz von requirejs im Web auftritt, er sofort Zugriff auf dieses Wissen hat.Ich wette, wenn diese Thread-Diskussion weitergeht, würde er auch hier auftauchen, um Hallo zu sagen.

Mein Haftungsausschluss ist, dass ich auch neu bei Require bin und möglicherweise Dinge falsch verstehe.Aber soweit ich weiß, dachte ich, dass diese zusätzlichen Hinweise und Informationen den Leuten helfen könnten, mithilfe von require besseren Code zusammenzustellen.

VERWEISE:

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top