javascript - source - Backbone.js & require.js: ¿cómo transformo mis modelos, vistas y colecciones en los módulos de require.js?
underscore js download (2)
La clave para comprender lo que se requiere (al menos en mi cerebro pequeño) es recordar que lo que devuelve de la función estará disponible para otros módulos que incorporen (o requieran) este módulo. Entonces, en el código a continuación, necesito jquery y backbone (jquery es un caso especial manejado por "require-jquery"). Cuando esos 2 estén disponibles, llamará a mi función y esa función devolverá el constructor de vista que creé.
define([
''jquery''
''libraries/backbone''
], function ($) {
var MovieRow = Backbone.View.extend({
render: function () {
return this;
}
});
return MovieRow;
});
Entonces podrías escribir algo como esto en tu página. Tenga en cuenta que jquery es el primer elemento requerido en la matriz. Esto corresponde al primer parámetro en mi función. La vista es la segunda y el modelo es la tercera. Entonces puedo usar el valor de retorno de mi código "definir" sobre el cual está el constructor.
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);
});
Espero que esto sea útil ... Hemos estado amando a Backbone y Requerimos :)
Estoy trabajando en una aplicación javascript con backbone.js que, para facilitar el desarrollo, estructuro mis archivos de esta manera.
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
ahora, que son muchos archivos javascript para el servidor para el usuario, veo algunos rumores acerca de labjs o require.js y decidí probarlos. pero no tengo idea de cómo reescribiré todos mis modelos de esqueleto o vistas en estos módulos de require.js.
Cualquier ayuda en la dirección correcta sería agradable.
Me quedé sin espacio en los comentarios y quería incluir un código, así que estoy produciendo una segunda respuesta:
Lo que @timDunham publicó es, en su mayor parte, bastante bueno, aunque tengo algunos extras que alguien podría añadir para una mayor comprensión.
En el código:
define([
''jquery''
''libraries/backbone''
]
Creo que falta guión bajo Primero, Backbone necesita subrayado para poder operar y sin él creo que se rompería. En segundo lugar, a menos que esté utilizando la bifurcación AMDJS de subrayado y espina dorsal, no son compatibles con AMD. Subrayar el soporte de AMD REMOVED con v1.3.0. Si asumimos que estamos utilizando un subrayado y una red troncal que no son de AMD, probablemente no pertenezcan a la define[] y deberían ser require[] .
Por lo tanto, la definición correcta se vería como esta si estuvieras usando correctamente las versiones AMDJS:
define([
''jquery'',
''underscore'',
''Backbone''
], function($, _, Backbone) { ... });
Esto supone que creé las rutas en la configuración requerida:
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'',
}
});
He visto algunas implementaciones que no usan las versiones de AMDJS y el problema es que, dado que no son módulos asíncronos, debe asegurarse de que estén cargados en el orden correcto.
Creo que esto NO garantiza el orden correcto de las dependencias de carga:
require({
baseUrl: ''/''
},[
''jquery'',
''app/views/movieRow'',
''app/models/movie'',
''libraries/backbone''
],
Debido a que algo se enumera como una dependencia, no significa que se cargará cuando sea necesario. Con los módulos asíncronos no es un problema, pero en este ejemplo no lo vi mencionado, así que asumiremos que no son AMD. Este módulo DEPENDE en jquery, movieRow, movie y backbone. Pero si la columna vertebral intenta cargar antes de jquery ... (x_x) ¿Por qué mundo por qué?
¡Por eso creo que require.js tiene un plugin llamado orden! al rescate. ¡Con orden! puede configurar sus dependencias y carga los scripts en ... bueno ... en orden. Algo como esto:
require({
baseUrl: ''/''
},[
''order!jquery'',
''app/views/movieRow'',
''app/models/movie'',
''order!libraries/underscore'', // <- Don''t forget me!
''order!libraries/backbone''
]
Creo que con esto, su módulo evaluará y garantizará que jquery se cargue primero, luego subrayará, luego la columna vertebral. No hay garantías para movieRow o movie aunque en este caso, ¿a quién le importa? :-)
Utilizo las bifurcaciones AMDJS-Backbone y AMDJS-Underscore para mi proyecto, así que generalmente las pongo en la define[] y funciona sin problemas. RequireJS realmente es impresionante y ha limpiado mi código significativamente. Donde quiera que vaya, JRBurke, el escritor de RequireJS, aparece en todas partes y siempre es muy servicial con sus comentarios sobre todo lo relacionado con require.js. Y me refiero a todo. Mi teoría es que él está conectado telepáticamente con Require y cada vez que se produce una nueva instancia de requirejs en la web, tiene acceso inmediato a ese conocimiento. Apuesto a que si esta discusión de hilo continúa, aparecerá aquí para saludar también.
Mi descargo de responsabilidad es que también soy nuevo en Require y podría estar entendiendo mal las cosas. Pero por lo que sé, pensé que estos punteros e información adicionales podrían ayudar a las personas a armar un mejor código utilizando el requisito.
Referencias