RequireJS avec jQuery Validation

Question

J'essaie d'utiliser RequireJS pour ajouter les références à mes fichiers script de validation jQuery. Je dépose 3 script au lieu de l'habituel 1:

1. jquery.validate - La bibliothèque de validation jquery
2. jquery.validate.unobtrusive - Cela ajoute la validation discrète à la bibliothèque de validation de jquery (vous pouvez donc utiliser des attributs de données et il les câline automatiquement). Cela dépend de jquery.validate
3. jquery.validate.custom - Ce ajouter mes propres méthodes de validation discrète personnalisés et dépend jquery.validate.unobtrusive

J'ai installé la configuration suivante:

require.config({ 
    paths: { 
     'jquery': 'Scripts/jquery-1.8.3.min', 
     'jquery.validate': 'Scripts/jquery.validate.custom' 
    }, 
    shim: { 
     'Scripts/jquery.validate': ['jquery'], 
     'Scripts/jquery.validate.unobtrusive': ['jquery', 'Scripts/jquery.validate'], 
     'Scripts/jquery.validate.custom': ['jquery', 'Scripts/jquery.validate.unobtrusive'] 
    } 
}); 

maintenant, j'ai le module suivant:

define(['jquery', 'jquery.validate'], function($) { 
    alert('Yey!'); 
}); 

Cependant, une erreur est renvoyée dans le fichier jquery.validate.custom me disant uno La dépendance btrusive n'a pas été injectée. Après un peu de débogage avec les outils du navigateur et en regardant l'onglet réseau, je peux voir qu'il télécharge avec succès les fichiers jquery.validate.custom.js et jquery.validate.js mais il n'essaie même pas de télécharger le jquery.validate.unobtrusive. fichier js.

J'apprécierais que quelqu'un puisse me montrer ce que je fais mal. Merci

Edit:

J'ai maintenant essayé:

require.config({ 
    paths: { 
     'jquery': 'Scripts/jquery-1.8.3.min', 
     'jquery.validate': 'Scripts/jquery.validate.custom' 
    }, 
    shim: { 
     'Scripts/jquery.validate': ['jquery'], 
     'Scripts/jquery.validate.unobtrusive': ['jquery', 'Scripts/jquery.validate'], 
     'jquery.validate': ['jquery', 'Scripts/jquery.validate.unobtrusive'] 
    } 
}); 

Et cela fonctionne correctement. J'ai également essayé ce qui suit, car je pense que cela a l'air mieux:

require.config({ 
    paths: { 
     'jquery': 'Scripts/jquery-1.8.3.min', 
     'jquery.validate': 'Scripts/jquery.validate.custom', 
     'jquery.validate.core': 'Scripts/jquery.validate', 
     'jquery.validate.unobtrusive': 'Scripts/jquery.validate.unobtrusive' 
    }, 
    shim: { 
     'jquery.validate.core': ['jquery'], 
     'jquery.validate.unobtrusive': ['jquery', 'jquery.validate.core'], 
     'jquery.validate': ['jquery', 'jquery.validate.unobtrusive'] 
    } 
}); 

Mais cela donne une erreur de délai.

Si quelqu'un pouvait expliquer pourquoi la deuxième solution ne fonctionne pas ce serait génial. Merci

Answer 1

Vous aurez besoin d fixer une seule clé dans votre config. Modifiez cette ligne:

'Scripts/jquery.validate.custom': ['jquery', 'Scripts/jquery.validate.unobtrusive'] 

Avec ce qui suit:

'jquery.validate': ['jquery', 'Scripts/jquery.validate.unobtrusive'] 

Et tout fonctionnera. En effet, si vous utilisez jquery.validate comme chemin, vous devrez utiliser le même nom dans shim config pour que toutes les dépendances fonctionnent correctement.

Answer 2

Je crois que les clés de la cale doivent correspondre aux noms dont vous avez besoin dans votre module. Aussi je pense qu'il confond le problème d'utiliser le nom jquery.validate mais ensuite le mapper à la coutume.

Pour moi, la structure suivante serait plus intuitive:

require.config({ 
    paths: { 
     jquery: 'Scripts/jquery-1.8.3.min', 
     jquery_validate: 'Scripts/jquery.validate' 
     jquery_validate_unobtrusive: 'Scripts/jquery.validate.unobtrusive' 
     jquery_validate_custom: 'Scripts/jquery.validate.custom' 
    }, 
    shim: { 
     jquery: { 
      exports: ['jQuery', '$'] 
     }, 
     jquery_validate: ['jquery'], 
     jquery_validate_unobtrusive: ['jquery_validate'], 
     jquery_validate_custom: ['jquery_validate_unobtrusive'] 
    } 
}); 

Et dans votre module, demander le fichier personnalisé:

define(['jquery', 'jquery_validate_custom'], function($) { 
    alert('Yey!'); 
}); 

EDIT: penser plus sur votre configuration d'origine et pourquoi cela ne marche pas: le problème que vous avez est que vous essayez d'intercaler l'utilisation des chemins complets avec les alias de module dans la section shim. RequireJS ne semble pas fonctionner de cette façon.Il semble être un processus de résolution à sens unique:

Module names requested --> expand to any additional modules from shim config --> load the actual files based on path mapping

Alors ce que vous essayez de faire est:

Module names requested (jquery.validate) --> resolve to actual files based on path mapping (jquery.validate.custom) --> expand to any additional modules from shim config --> resolve paths again

Ainsi, par exemple, cela fonctionne très bien:

require.config({ 
    paths: { 
    module1: 'module1file', 
    module2: 'module2file', 
    module3: 'module3file' 
    }, 
    shim: { 
    module3: ['module2'], 
    module2: ['module1'] 
    } 
}); 

require(['module3'], function() { 
}); 

Mais cette pas:

require.config({ 
    paths: { 
    module1: 'module1file', 
    module2: 'module2file', 
    module3: 'module3file' 
    }, 
    shim: { 
    module3: ['module2'], 
    module2file: ['module1'] 
    } 
}); 

require(['module3'], function() { 
});