Backbone.js: separa la vista, la colección, el modelo en un archivo js diferente, no pueden reconocerse

Question

Utilizo Backbone.js para crear una aplicación web, toda la vista, la colección y la escritura del modelo en un archivo js, ¡es un éxito!

ahora quiero separarlos a diferentes archivos js, al igual que:

<script type="text/javascript" src="js/layermanagemodel.js"></script>  
<script type="text/javascript" src="js/layermanagecollection.js"></script> 
<script type="text/javascript" src="js/layermanageview.js"></script>  
<script type="text/javascript" src="js/boot.js"></script> 

y el modelo de carga de código en la carga jQuery:

$(function(){ 
    //Model 
     var manageModel = Backbone.Model.extend({ 
       default:{ 
        'selectedId':'unknow' 
       }, 
       selectLayer:function(uuid){ 
        this.set({"selectedId": uuid}); 
       }, 
       delLayer:function(){ 

       } 
     }); 
}) 

pero el Firebug dime error:

manageModel is not defined 
[Break On This Error] 

model: manageModel 

en el archivo de recopilación

??

por eso que si les separar de archivo diferente, no podían reconocerse entre sí, ¿cómo puedo solucionar este problema o lo que es del orden de carga correcta gracias

Answer 1

Una vez que añadir las envolturas de función:?

$(function() { 
    // ... 
}) 

Ha introducido nuevos ámbitos y todos los var s declarados dentro de esas funciones solo son visibles dentro de esas funciones. Usted puede evitar esto, haciéndolos mundial (es decir, propiedades de window):

$(function(){ 
    window.manageModel = Backbone.Model.extend({ 
     //... 
    }); 
}); 

o mejor, introducir un espacio de nombres de la aplicación:

$(function(){ 
    window.app = window.app || { }; 
    window.app.manageModel = Backbone.Model.extend({ 
     //... 
    }); 
}); 

y luego referirse a cosas a través app como app.manageModel:

$(function(){ 
    window.app = window.app || { }; 
    window.app.someCollection = Backbone.Collection.extend({ 
     model: app.manageModel, 
     //... 
    }); 
}); 

Answer 2

También puede ver cómo hacer archivos js modulares usando Require.js. Funciona muy bien y solo cargará las vistas, los modelos y las colecciones cuando sean necesarios. Esto se recomienda si su aplicación es bastante grande. Le evitará tener que cargar todos sus scripts en la carga de la página. Una implementación rápida de backbone.js sería la siguiente:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'models/post' 
], function ($, _, Backbone, Post) { 
    "use strict"; 
    var PostsCollection = Backbone.Collection.extend({ 
     model: Post, 
     url: CONFIG.apiUrl + 'posts' 
    }); 
    return PostsCollection; 
}); 

Lo anterior es un módulo de recopilación. Puede ver que 'modelos/publicación' apunta a la ubicación de otro módulo. jquery, guión bajo y columna vertebral se definieron en mi configuración, así que solo tengo que pasarlos en lugar de señalar su ubicación real. Esta es una introducción rápida, pero si está buscando separar sus archivos js, Require.js es el camino.