2011-11-17 5 views
15

Sto tentando di implementare un test di base ESTREMAMENTE che utilizza jquery, underscore.js e backbone.js caricati tramite require.js e per qualche motivo non riesco proprio a sembrare ottenere tutto allineato correttamente. La ricerca mostra che altri non hanno avuto questi stessi problemi quindi so che deve essere qualcosa di semplice che non vedo.Backbone/Underscore di base molto semplice tramite il problema Require.js mi guida batty

Il problema che sto avendo è che quando backbone.js si sta caricando, non riesce a trovare un riferimento a _. Ho trovato altre persone che hanno segnalato lo stesso problema, ma il problema era in genere il passaggio dei riferimenti di dipendenza in gestori nell'ordine sbagliato o altri problemi evidenti. Questo sta accadendo quando il backbone si sta caricando.

Ho anche visto un certo numero di soluzioni "meccaniche" come "mettere tutto nello stesso file" e caricarle semplicemente in modo tradizionale inserendo un certo numero di script nell'ordine corretto ma VERO VERAMENTE che voglio ottenere questo funziona dal momento che sembra un approccio così potente.

Inizialmente ho iniziato con la struttura qui http://backbonetutorials.com/organizing-backbone-using-modules/ che funziona nella demo, ma si sente un po 'fragile perché quando tento di apportare modifiche molto semplici o di costruire un semplice campione da zero, si rompe.

Dopo aver colpito la testa contro questo per troppo tempo, sono tornato e ho trovato questa pagina Loading Backbone and Underscore using RequireJS con un altro semplice esempio e ho riacquistato la speranza. Tuttavia, dopo aver creato un nuovo test basato su di esso, sto ancora ricevendo lo stesso problema anche se il ramo 0.5.3-optamd di backbone dovrebbe gestire la propria dipendenza dal carattere di sottolineatura.

Senza ulteriori indugi, ecco il codice super-diretto che dovrebbe funzionare ma invece mi sta facendo impazzire. Qui sta sperando che sia qualcosa di ovvio Ho appena perso in qualche modo:

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Backbone.js/Underscore.js via Require.js Learning Page</title> 
     <script src="js/libs/require/require.js"></script> 
     <script src="js/main.js"></script> 
    </head> 
    <body> 
     <div>Backbone.js/Underscore.js via Require.js Learning Page</div> 
     <div class="testhook"></div> 
    </body> 
</html> 

JS/main.js

require.config({ 
    paths: { 
      'jquery': 'libs/jquery/1.7/jquery', 
      'underscore': 'libs/underscore/1.2.2/underscore', 
      'backbone': 'libs/backbone/0.5.3-optamd/backbone' 
    }, 
    baseUrl: '/js', 
    urlArgs: 'v=1.0' 
}); 

require([ 
     'domReady', 
     'app' 
     ], 
     function(domReady, App){ 
      domReady(function(){ 
       console.log('Dom is ready'); 
       App.init(); 
      }); 
     } 
); 

js/app.js

// Filename: app.js 
define([ 
     'jquery', 
     'underscore', 
     'backbone' 
     ], 
     function($, _, Backbone){ 

      var init = function(){ 

       console.log('app.js > init()'); 

       // jquery test (WORKS) 
       $('.testhook').append('testhook append'); 

       // underscore test (WORKS) 
       console.log(_.map([1, 2, 3], function(n){ return n * 2; })); 

       // backbone test (DIES) 
       var artist = new Backbone.Model({ 
         firstName: "Wassily", 
         lastName: "Kandinsky" 
        }); 

        artist.set({birthday: "December 16, 1866"}); 

        console.log(JSON.stringify(artist)); 
      } 

      return { init: init }; 
     } 
); 

L'esatta l'output della console è:

Uncaught TypeError: Cannot call method 'extend' of undefined (backbone.js:150) 
main.js:18 Dom is ready 
app.js:11  app.js > init() 
app.js:17  [2, 4, 6] 
app.js:20  Uncaught TypeError: Cannot read property 'Model' of null (app.js:20) 

NOTE: 
Line 150 in unminified backbone.js is: 
_.extend(Backbone.Model.prototype, Backbone.Events, { 

Sono su un computer Windows 7 che utilizza Chrome 17.0.938.0 dev-m.

mie versioni di script sono:

backbone:  0.5.3-optand 
jquery:   1.7 
require:  1.0.1 
underscore:  1.2.2 

La mia struttura di directory è:

js 
+-- libs/ 
¦  +-- backbone/ 
¦  ¦  +-- 0.5.3-optamd/ 
¦  ¦     +-- backbone.js 
¦  +-- jquery/ 
¦  ¦  +-- 1.7/ 
¦  ¦   +-- jquery.js 
¦  +-- require/ 
¦  ¦  +-- require.js 
¦  +-- underscore/ 
¦    +-- 1.2.2/ 
¦     +-- underscore.js 
+-- app.js 
+-- domReady.js 
+-- main.js 
+-- order.js 
index.html 

Non posso credere quanta difficoltà questo mi sta dando e sono veramente sperando che qualcuno possa far luce su ciò che il diamine sta succedendo qui.

+0

tuo esempio per me funziona al 100%. quale esatta versione di Backbone stai usando? optamd o optamd3? – Riebel

risposta

20

In realtà ho passato molto tempo a lottare con lo stesso identico problema!

Ecco come sono riuscito a farlo funzionare ...

Prima di tutto, scaricare il nuovo progetto di esempio richiedere-js con jQuery 1.7. Nel file zip troverai un file chiamato require-jquery.js che include jQuery 1.7 che ora è conforme a AMD.

quindi scaricare l'ultima versione di richiedere, che è ora anche AMD, e ultimo, provare questa versione di Backbone ...

https://github.com/jrburke/backbone/blob/optamd/backbone.js

Burke ha creato questo fuori di una forchetta di spina dorsale e reso una versione compatibile con AMD.

Poi ...
index.htm

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Google Analytics API Browser</title> 
     <!-- This is a special version of jQuery with RequireJS built-in --> 
     <script data-main="main" src="require-jquery.js"></script> 
    </head> 
    <body> 

    </body> 
</html> 

main.js

require(['jquery','order!libs/underscore-min','order!libs/backbone','order!scripts/app'], 
function($,_,Backbone,app){ 
    app.init(); 
}); 

app.js

define(['jquery','backbone','scripts/home'], function($, Backbone, router){ 
    var init = function(){ 
     console.log("Started"); 
      // In here you can load your routers/views/whatever 
    }; 

    return { init: init}; 
}); 

mia struttura dei file si presenta come
/app/index.htm
/app/require-jquery.js
/app/order.js
/app/main.js
/app/text.js
/app/scripts/app.js
/app/scripts/home.js
/app/lib/underscore-min.js
/app/lib/backbone.js

fatemi sapere se questo aiuta, mi ha colpito su twitter @ jcreamer898 se avete bisogno di un po 'di aiuto, Sto letteralmente lavorando alle stesse cose!

UPDATE ho recentemente creato una Github 2 progetti GitHub, uno un'applicazione vera e propria, e un altro un semplice antipasto ...

https://github.com/jcreamer898/Savefavs
https://github.com/jcreamer898/RequireJS-Backbone-Starter

+0

Eccellente! Darò uno scatto! – greenanvil

+0

Ecco un codice funzionante ... https: //github.com/jcreamer898/Savefavs – jcreamer898

+0

Grazie ancora per l'informazione! Sembra che una cosa fondamentale che mi mancava era assicurarsi di chiamare il plug-in degli ordini sull'app principale per assicurarsi che fosse caricato (e chiamato backbone/underscore/etc) -dopo- erano stati caricati.Intendo esaminare anche l'argomento della priorità di configurazione in quanto potrebbe ridurre la necessità di utilizzare l'ordine. Grazie ancora, davvero. Non sono abituato a imbattersi in cose che mi danno così tanto fastidio e ho voluto evitare di scavare nella meccanica sottostante per vedere cosa stava realmente accadendo (per ora). Ora posso salvarlo per dopo e tornare alle cose divertenti! :) Saluti! – greenanvil

0

Usa optamd3 ramo.

+0

Stava già usando il ramo optamd (vedi domanda originale). Il problema sembrava essere un problema di pathing e forse un problema di ordine dell'app principale. Una volta ho messo le librerie principali una accanto all'altra, ho smesso di provare a usare le opzioni di configurazione del percorso e ho inviato l'app principale attraverso il plugin per l'ordine, tutto ha iniziato a funzionare come previsto. Grazie mille. – greenanvil

5

Ho avuto lo stesso problema. In realtà ho scoperto che non hai bisogno di un Backbone o Underscore compatibile con AMD, o require-jquery o qualsiasi altra cosa (ad esempio! Ordine). Tutto ciò che devi fare è definire l'app nei percorsi e impostare le sue dipendenze in shim :). In qualche modo funzionava senza di esso in passato.

paths: { 
    app:'app', 
    jquery: '../libs/jquery/jquery.1.9.1.min', 
    underscore: '../libs/underscore/underscore.min', 
    backbone: '../libs/backbone/backbone.min', 
    // ... 
}, 
shim: { 
"app": { 
     deps: ['jquery','underscore','backbone'], 
     exports: 'app' 
}, 
"backbone": { 
    deps: ['jquery','underscore'], 
    exports: 'Backbone' 
}, 
"underscore": { 
    exports: '_' 
} 
//... 

}