Backbone.js & require.js: comment puis-je transformer mes modèles, vues et collections aux modules de require.js?

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

Question

Je travaille sur une application javascript avec Backbone.js, qui a dit, pour la facilité de développement je structure mes fichiers ainsi 

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

, qui sont beaucoup de fichiers javascript au serveur à l'utilisateur, je vois un certain buzz autour labjs ou require.js et a décidé de tester avec elle. mais je ne sais pas comment je réécrire tous mes modèles de colonne vertébrale ou des vues sur ces modules require.js.

toute aide dans la bonne direction serait bien.

Était-ce utile?

La solution

La clé pour comprendre require (au moins dans mon petit cerveau) est de se rappeler que ce que vous revenez de la fonction sera disponible à d'autres modules qui tirent (ou besoin) de ce module. Ainsi, dans le code ci-dessous, j'ai besoin jquery et la colonne vertébrale (jquery est un cas particulier traité par « besoin-jquery »). Lorsque les deux sont disponibles, il appellera ma fonction et cette fonction retourne le constructeur Voir que j'ai créé. 

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

                return this;
            }
        });

        return MovieRow;
});

Alors vous pourriez écrire quelque chose comme ceci à votre page. Notez que jquery est le premier élément nécessaire dans le tableau. Cela correspond au premier paramètre dans ma fonction. La vue est 2ème et le modèle est 3ème. Ensuite, je peux utiliser la valeur de retour de mon code « définir » ci-dessus qui est le constructeur. 

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);        
});

Espérons que cela est utile ... Nous avons été aimons Backbone et exiger:)

Autres conseils

Je suis sorti de l'espace dans les commentaires et je voulais inclure un code si je produis une deuxième réponse:

Qu'est-ce que @timDunham est affiché pour la plupart assez bon même si j'ai quelques extras que quelqu'un pourrait carillon sur pour une meilleure compréhension.

Dans le code: 

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

Je crois Souligné manque. Tout d'abord, a besoin Backbone Souligné pour fonctionner et sans elle, je pense que ce serait briser. En second lieu, à moins que vous utilisez la fourche AMDJS de Souligné et Backbone, ils ne sont pas AMD de soutien. Underscore AMD avec support RETIRÉ v1.3.0. Si nous supposons que nous utilisons underscore non-AMD et la colonne vertébrale, ils ne probablement pas sa place dans le define[] et doivent être require[] à la place.

Alors la bonne définir ressemblerait à quelque chose comme cela si vous utilisez correctement les versions AMDJS: 

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

Cela suppose que j'ai créé les chemins dans le besoin config: 

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',
    }
});

J'ai vu certaines implémentations qui n'utilisent pas les versions AMDJS et la chose avec ceux est que depuis qu'ils ne sont pas des modules asynchrones, vous devez vous assurer qu'ils sont chargés dans le bon ordre.

Je crois que cela ne garantit pas l'ordre correct des dépendances de chargement: 

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

Parce que quelque chose est répertorié comme une dépendance, ne signifie pas qu'il va charger en cas de besoin. Avec des modules asynchrones, il est pas un problème, mais dans cet exemple je ne l'ai pas mentionné que nous allons supposer qu'ils ne sont pas AMD. Ce module DÉPEND jquery, movieRow, film, et la colonne vertébrale. Mais si épine dorsale tente de charger avant jquery ... (x_x) Pourquoi monde pourquoi?

Quelle est la raison pour laquelle je crois require.js a un plugin appelé commande! à la rescousse. Avec cette commande! vous pouvez configurer vos dépendances et charge les scripts ... eh bien ... commande. Quelque chose comme ceci: 

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

Je crois avec cela, votre module évaluera et la garantie que jquery est chargé en premier, puis underscore, puis épine dorsale. Aucune garantie pour movieRow ou un film, bien que dans ce cas, qui se soucie? : -)

J'utilise les AMDJS-Backbone et fourches AMDJS-Underscore pour mon projet et je les mets habituellement dans le define[] et cela fonctionne sans accroc. RequireJS est vraiment génial et a nettoyé de manière significative mon code. Partout où je vais JRBurke l'auteur de RequireJS apparaît partout et il est toujours utile super duper avec ses commentaires sur tout ce qui concerne require.js. Et je veux dire tout. Ma théorie est qu'il est connecté par télépathie à exiger et à chaque fois une nouvelle instance de requirejs se produit sur le web, il dispose d'un accès immédiat à cette connaissance. Je parie que si cette discussion thread il continue avait pop-up ici pour dire bonjour aussi.

Mon avertissement est que je suis aussi nouveau pour exiger et je pourrais être mal compris les choses. Mais d'après ce que je sais, je pensais que ces pointeurs supplémentaires et les informations pourraient aider les gens mettent ensemble un meilleur code en utilisant besoin.

Références:

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top