vue remote template

modèle-vue-remote

Un mixin Vue.js pour récupérer le modèle via Ajax

Synopsis

 < html >
  < body >
    < div id =" app " > </ div >
    < script src =" /app.js " > </ script >
  </ body >
</ html > 

 // app.js
import Vue from "vue/dist/vue.esm"
import VueRemoteTemplate from "vue-remote-template"

document . addEventListener ( "DOMContentLoaded" , ( ) => {
  new Vue ( {
    mixins : [ VueRemoteTemplate ] ,
    el : "#app" ,
    data : {
      templatePath : "/hello"
    }
  } )
} )

Le code ci-dessus récupère un fragment HTML de /hello via Ajax. Nous appelons ce modèle distant . Les modèles distants sont compilés dans des modèles Vue et sont utilisés pour construire une arborescence DOM sur l'élément <div> cible.

Liaisons d’entrée de formulaire

Lorsqu'un modèle distant est récupéré, un composant Vue est créé dynamiquement.

Et si les modèles distants contiennent des directives v-model , les données du composant sont initialisées à l'aide de la fonction getInitialData du package vue-data-scooper.

 < form >
  < input type =" text " name =" user[name] " v-model =" user.name " value =" Alice " >
</ form >

Le modèle distant ci-dessus définit la propriété user.name du composant sur la chaîne « Alice ».

Données initiales

La date de réponse du serveur backend peut être une chaîne ou une donnée JSON.

Dans le premier cas, la chaîne sera interprétée comme le modèle distant.

Dans ce dernier cas, les données JSON doivent avoir une clé template et une clé data facultative. La valeur de la clé template sera interprétée comme le modèle distant. La valeur de la clé data sera utilisée comme données initiales du composant Vue.

Par exemple, lorsque le serveur renvoie les données JSON suivantes :

{
  "template" : " <div>{{ message }}</div> " ,
  "data" : { "message" : " Hello, world! " }
}

Ensuite, le fragment HTML résultant sera <div>Hello, world!</div> .

Notez que les données initiales fournies par les données JSON du serveur écrasent les données définies par les directives v-model .

Rallonges

Si vous souhaitez initialiser les propriétés du composant qui ne sont pas liées à une entrée via la directive v-model , vous devez fournir une extension .

 // greeting.js
export const greeting = {
  data : function ( ) {
    return {
      name : "Alice"
    }
  }
}

Une extension est un mixin à utiliser lors de la création du composant.

Vous pouvez enregistrer des extensions dans la propriété extensions .

 // app.js
import Vue from "vue/dist/vue.esm"
import VueRemoteTemplate from "vue-remote-template"
import { greeting } from "./greeting"

document . addEventListener ( "DOMContentLoaded" , ( ) => {
  new Vue ( {
    mixins : [ VueRemoteTemplate ] ,
    el : "#app" ,
    data : {
      templatePath : "/hello" ,
      extensions : {
        greeting : greeting
      }
    }
  } )
} )

Le nom de l'extension doit être spécifié par l'attribut data-extension de l'élément racine du modèle distant :

 < div data-extension =" greeting " >
  < div > Hello, {{name}}! </ div >
</ div >

Le modèle ci-dessus produit le fragment HTML suivant :

 < div data-extension =" greeting " >
  < div > Hello, Alice! </ div >
</ div > 

méthode visit

Vous pouvez appeler la méthode visit pour changer de modèle distant.

 < div >
  < button type =" button " @click =" visit('/goodbye') " > Click me! </ button >
</ div >

Lorsque l'utilisateur clique sur ce bouton du navigateur, un accès Ajax à /goodbye est exécuté et un modèle distant est récupéré.

Si l'élément racine d'un modèle nouvellement récupéré possède l'attribut data-title , sa valeur est définie sur le titre du document.

Et, l'élément racine d'un modèle nouvellement récupéré a l'attribut data-url , sa valeur est utilisée pour ajouter une entrée à l'historique du navigateur à l'aide de la méthode window.history.pushState().

Voici un exemple de modèle distant :

 < div data-extension =" greeting " data-title =" Farewell " data-url =" /bye " >
  < div > Goodbye, {{name}}! </ div >
</ div >

Si vous utilisez la méthode visit sur un élément a , vous pouvez omettre l'argument de la méthode. La valeur href de l'élément a est interprétée comme le chemin du modèle distant.

 < div >
  < a href =" /goodbye " @click.prevent =" visit " > Click me! </ a >
</ div >

Notez que vous devez empêcher l'action par défaut afin que le navigateur ne visite pas réellement le chemin spécifié.

méthode submit

Vous pouvez appeler la méthode submit pour soumettre les données du formulaire via un appel Ajax.

 < form action =" /users/123 " method =" post " @submit.prevent =" submit " >
  < input type =" hidden " name =" _method " value =" patch " >
  < input type =" text " name =" user[name] " v-model =" user.name " value =" Alice " >
  < input type =" submit " value =" Update " >
</ form >

Lorsque l'utilisateur clique sur le bouton "Mettre à jour", une requête Ajax via la méthode PATCH est soumise au /users/123 .

Si le serveur renvoie un texte, il est utilisé comme modèle distant pour afficher le résultat. Si le serveur renvoie un objet JSON, il doit contenir la clé templatePath , dont la valeur est utilisée pour effectuer une autre requête Ajax afin de récupérer un modèle distant.

Notez que la méthode submit doit être appelée sur l'élément <form> . Vous ne pouvez pas l'appeler sur les éléments d'un formulaire.

Notez également que la méthode d'appel Ajax est déterminée par la valeur d'un élément caché dont le nom est _method .

Démo

Voir https://github.com/kuroda/vue-rails-form-builder-demo.

Configuration du développement

 # install dependencies
yarn install

# test
yarn test

Vous avez besoin de la version 59 ou supérieure de Google Chrome pour exécuter le test. Si vous utilisez google-chrome-beta , exportez la variable d'environnement CHROME_BIN :

 export CHROME_BIN= $( which google-chrome-beta ) 

Bâtiment pour la distribution

yarn build