Backbone.js & request.js: ¿Cómo transformo mis modelos, vistas y colecciones para requerir módulos.js?

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

Pregunta

Estoy trabajando en una aplicación JavaScript con Backbone.js, dicho, para facilitar el desarrollo, estructura 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 de JavaScript para servir al usuario, veo algo de revuelo sobre LABJ o requerir.js y decidí probarlo. Pero no tengo idea de cómo reescribiría todos mis modelos o vistas de la troncal en estos módulos requeridos.

Cualquier ayuda en la dirección correcta sería buena.

¿Fue útil?

Solución

La clave para la comprensión requiere (al menos en mi pequeño cerebro) es recordar que lo que devuelve de la función estará disponible para otros módulos que atraen (o requieren) este módulo. Entonces, en el código a continuación, necesito jQuery y backbone (JQuery es un caso especial manejado por "Requirn-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 puede escribir algo como esto en su 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 2da y el modelo es tercero. Luego puedo usar el valor de retorno de mi código "Definir" anterior, que es 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 la columna vertebral y requerimos :)

Otros consejos

Me quedé sin espacio en comentarios y quería incluir algún código, así que estoy produciendo una segunda respuesta:

Lo que publicó @timdunham es en su mayor parte bastante bueno, aunque tengo algunos extras en los que alguien podría intervenir para una mayor comprensión.

En el código:

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

Creo que falta bajo. Primero, Backbone necesita subrayado para operar y sin ella creo que se rompería. En segundo lugar, a menos que esté utilizando la bifurcación de AMDJS de subrayado y columna vertebral, no son de apoyo. Subsensor eliminado de soporte AMD con V1.3.0. Si suponemos que estamos usando un subrayador y columna vertebral no amd, probablemente no pertenecen al define[] y debería ser require[] en cambio.

Por lo tanto, la definición adecuada se vería algo así si está utilizando correctamente las versiones AMDJS:

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

Esto supone que creé las rutas en la configuración Requerir:

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 AMDJS y lo que tiene con ellas 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 figura 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 vi que se mencione, así que asumiremos que no son AMD. Este módulo depende de jQuery, Movierow, película y columna vertebral. Pero si Backbone intenta cargarse antes de jQuery ... (x_x) ¿Por qué el mundo por qué?

¡Es por eso que creo que require.js tiene un complemento llamado orden! al rescate. ¡Con orden! Puede configurar sus dependencias y carga los scripts en ... bueno ... ordene. 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 carga primero, luego subrayan, luego colina. No hay garantías para Movierow o película, aunque en este caso, ¿a quién le importa? :-)

Utilizo las horquillas AMDJS-Backbone y AMDJS-Ounderscore para mi proyecto, por lo que generalmente los pongo en el define[] Y funciona sin problemas. RequestJS es realmente increíble y ha limpiado mi código significativamente. Dondequiera que vaya Jrburke, el escritor de Requirjs aparece en todas partes y siempre es muy útil con sus comentarios sobre todo lo relacionado. Y me refiero a todo. Mi teoría es que está conectado telepáticamente para requerir y en cualquier momento se produce una nueva instancia de requisitos en la web, tiene acceso inmediato a ese conocimiento. Apuesto a que si esta discusión de hilo continúa, aparecería aquí para saludar también.

Mi descargo de responsabilidad es que también soy nuevo para requerir y podría estar malinterpretando cosas. Pero por lo que sé, pensé que estos consejos e información adicionales podrían ayudar a las personas a organizar un mejor código que usa el requerimiento.

Referencias:

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top