vue remote template

plantilla-remota-vue

Un mixin de Vue.js para buscar plantillas a través de Ajax

Sinopsis

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

El código anterior recupera un fragmento HTML de /hello a través de Ajax. A esto lo llamamos plantilla remota . Las plantillas remotas se compilan en plantillas de Vue y se utilizan para construir un árbol DOM en el elemento <div> de destino.

Enlaces de entrada de formulario

Cuando se recupera una plantilla remota, se crea dinámicamente un componente de Vue.

Y si las plantillas remotas contienen directivas v-model , los datos del componente se inicializan utilizando la función getInitialData del paquete vue-data-scooper.

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

La plantilla remota anterior establece la propiedad user.name del componente en la cadena "Alice".

Datos iniciales

La fecha de respuesta del servidor backend puede ser una cadena o datos JSON.

En el primer caso, la cadena se interpretará como la plantilla remota.

En el último caso, los datos JSON deben tener una clave template y una clave data opcional. El valor de la clave template se interpretará como la plantilla remota. El valor de la clave data se utilizará como datos iniciales del componente Vue.

Por ejemplo, cuando el servidor devuelve los siguientes datos JSON:

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

Entonces, el fragmento HTML resultante será <div>Hello, world!</div> .

Tenga en cuenta que los datos iniciales proporcionados por los datos JSON del servidor sobrescriben los datos establecidos por las directivas v-model .

Extensiones

Si desea inicializar las propiedades del componente que no están vinculadas a una entrada mediante la directiva v-model , debe proporcionar una extensión .

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

Una extensión es un mixin que se utilizará cuando se crea el componente.

Puede registrar extensiones en la propiedad 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
      }
    }
  } )
} )

El nombre de la extensión debe especificarse mediante el atributo data-extension del elemento raíz de la plantilla remota:

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

La plantilla anterior produce el siguiente fragmento HTML:

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

método visit

Puede llamar al método visit para cambiar la plantilla remota.

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

Cuando el usuario hace clic en este botón en el navegador, se ejecuta un acceso Ajax a /goodbye y se recupera una plantilla remota.

Si el elemento raíz de una plantilla recién recuperada tiene el atributo data-title , su valor se establece en el título del documento.

Y el elemento raíz de una plantilla recién recuperada tiene el atributo data-url , su valor se usa para agregar una entrada al historial del navegador usando el método window.history.pushState().

A continuación se muestra un ejemplo de plantilla remota:

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

Si usa el método visit en un elemento a , puede omitir el argumento del método. El valor href del elemento a se interpreta como la ruta de la plantilla remota.

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

Tenga en cuenta que debe impedir la acción predeterminada para que el navegador no visite realmente la ruta especificada.

método submit

Puede llamar al método submit para enviar datos del formulario mediante una llamada 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 >

Cuando el usuario hace clic en el botón "Actualizar", se envía una solicitud Ajax mediante el método PATCH al /users/123 .

Si el servidor devuelve un texto, se utiliza como plantilla remota para mostrar el resultado. Si el servidor devuelve un objeto JSON, debe contener la clave templatePath , cuyo valor se utiliza para realizar otra solicitud Ajax para recuperar una plantilla remota.

Tenga en cuenta que el método submit debe llamarse en el elemento <form> . No puede invocarlo en los elementos dentro de un formulario.

Tenga en cuenta también que el método de llamada de Ajax está determinado por el valor de un elemento oculto cuyo nombre es _method .

Manifestación

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

Configuración de desarrollo

 # install dependencies
yarn install

# test
yarn test

Necesita Google Chrome versión 59 o superior para ejecutar la prueba. Si usa google-chrome-beta , exporte la variable de entorno CHROME_BIN :

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

Edificio para distribución

yarn build