VueJs Templating. Comment charger des modèles externes

Je suis nouveau sur Vue.js, j’ai utilisé AngularJS pendant un certain temps et en angular nous avons utilisé des modèles tels que,

template: '/sometemplate.html', controller: 'someCtrl' 

Comment pouvons-nous faire une telle chose dans Vue, au lieu de garder de gros modèles HTML dans JavaScript comme ça,

 new Vue({ el: '#replace', template: '

replaced

' })

Ceci est OK pour les petits modèles, mais pour les grands modèles est-ce pratique?

Existe-t-il un moyen de charger un modèle HTML externe ou d’utiliser un modèle HTML dans une balise de script comme dans Vue?

 HTML template goes here 

Vous pouvez utiliser le modèle de balise de script en vous référant uniquement à son id .

 { template: '#some-id' } 

Cependant, je vous recommande fortement d’utiliser vueify (si vous utilisez browserify) ou vue-loader (si vous utilisez webpack) afin de pouvoir stocker vos composants dans de jolis petits fichiers .vue comme celui-ci.

fichier de vue

En outre, l’auteur de Vue a écrit un article intéressant sur le sujet des URL de modèles externes:

http://vuejs.org/2015/10/28/why-no-template-url/

David, c’est un bon exemple, mais quelle est la meilleure façon de vous assurer que le DOM est compilé?

https://jsfiddle.net/q7xcbuxd/35/

Lorsque je simule une opération asynchrone, comme dans l’exemple ci-dessus, cela fonctionne. Mais dès que je charge une page externe “à la volée”, Vue se plaint car le DOM n’est pas prêt. Plus spécifiquement: Uncaught TypeError: Cannot set property ' vue ' of undefined Existe-t-il une meilleure façon de procéder que d’appeler $comstack lorsque la page est chargée? J’ai essayé avec $mount , mais cela n’a pas aidé.

MISE À JOUR: Peu importe, j’ai finalement compris comment le faire:

 Vue.component('async-component', function (resolve, reject) { vue.$http.get('async-component.html', function(data, status, request){ var parser = new DOMParser(); var doc = parser.parseFromSsortingng(data, "text/html"); resolve({ template: doc }); }); }); 

Et dans le modèle actuel, j’ai enlevé le

  

balises et seulement le html.

(Cette solution nécessite le chargeur http à l’adresse https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js )

Vous pouvez essayer ceci: https://github.com/FranckFreiburger/http-vue-loader

Exemple:

  new Vue({ components: { 'my-component': httpVueLoader('my-component.vue') }, ... 

Vous pouvez utiliser cette approche avec superagent:

 var promise = superagent.get("something.html") .end(function (error, response) { if (error) { console.error("load of something.html failed", error)); return; } var parser = new DOMParser() var doc = parser.parseFromSsortingng(response.text, "text/html"); document.body.appendChild(doc.scripts[0]); }); 

Il suffit de mettre votre template basé sur la balise intérieur de something.html sur votre serveur.

Si vous utilisez jQuery, .load devrait fonctionner.

Assurez-vous simplement que ceci soit terminé avant que le DOM en question ne soit compilé par Vue. Ou utilisez $ mount pour configurer manuellement les choses.

Utilisez browserify pour regrouper tout comme ceci:

 //Home.js import Vue from 'vue'; var Home = Vue.extend({ template: require('./Home.vue') }); export default Home; //Home.vue 

Hello

// And for your browserify bundle use a transform called ssortingngify ... .transform(ssortingngify(['.html', '.svg', '.vue', '.template', '.tmpl']));