vue remote template

modelo vue-remote

Um mixin Vue.js para buscar modelo via Ajax

Sinopse

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

O código acima busca um fragmento HTML de /hello via Ajax. Chamamos esse modelo remoto . Modelos remotos são compilados em modelos Vue e usados ​​para construir uma árvore DOM no elemento <div> de destino.

Vinculações de entrada de formulário

Quando um modelo remoto é obtido, um componente Vue é criado dinamicamente.

E se os modelos remotos contiverem diretivas v-model , os dados do componente serão inicializados usando a função getInitialData do pacote vue-data-scooper.

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

O modelo remoto acima define a propriedade user.name do componente como a string "Alice".

Dados iniciais

A data de resposta do servidor back-end pode ser uma string ou dados JSON.

No primeiro caso, a string será interpretada como o modelo remoto.

Neste último caso, os dados JSON devem ter chave template e chave data opcional. O valor da chave template será interpretado como o modelo remoto. O valor da chave data será usado como os dados iniciais do componente Vue.

Por exemplo, quando o servidor retorna os seguintes dados JSON:

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

Então, o fragmento HTML resultante será <div>Hello, world!</div> .

Observe que os dados iniciais fornecidos pelos dados JSON do servidor substituem os dados definidos pelas diretivas v-model .

Extensões

Se você deseja inicializar as propriedades do componente que não estão vinculadas a uma entrada por meio da diretiva v-model , você deve fornecer uma extensão .

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

Uma extensão é um mixin a ser usado quando o componente é criado.

Você pode registrar extensões na propriedade 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
      }
    }
  } )
} )

O nome da extensão deve ser especificado pelo atributo data-extension do elemento raiz do modelo remoto:

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

O modelo acima produz o seguinte fragmento HTML:

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

método visit

Você pode chamar o método visit para alternar o modelo remoto.

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

Quando o usuário clica neste botão no navegador, um acesso Ajax para /goodbye é executado e um modelo remoto é obtido.

Se o elemento raiz de um modelo recém-buscado tiver o atributo data-title , seu valor será definido como o título do documento.

E, o elemento raiz de um modelo recém-buscado tem o atributo data-url , seu valor é usado para adicionar uma entrada ao histórico do navegador usando o método window.history.pushState().

Aqui está um exemplo de modelo remoto:

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

Se você usar o método visit em um elemento a , poderá omitir o argumento do método. O valor href do elemento a é interpretado como o caminho do modelo remoto.

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

Observe que você deve impedir a ação padrão para que o navegador não visite realmente o caminho especificado.

método submit

Você pode chamar o método submit para enviar dados do formulário por meio de uma chamada 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 >

Quando o usuário clica no botão "Atualizar", uma solicitação Ajax via método PATCH é enviada ao /users/123 .

Se o servidor retornar um texto, ele será usado como modelo remoto para mostrar o resultado. Se o servidor retornar um objeto JSON, ele deverá conter a chave templatePath , cujo valor será usado para fazer outra solicitação Ajax para buscar um modelo remoto.

Observe que o método submit deve ser chamado no elemento <form> . Você não pode chamá-lo nos elementos de um formulário.

Observe também que o método de chamada Ajax é determinado pelo valor de um elemento oculto cujo nome é _method .

Demonstração

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

Configuração de desenvolvimento

 # install dependencies
yarn install

# test
yarn test

Você precisa do Google Chrome versão 59 ou superior para executar o teste. Se você usar google-chrome-beta , exporte a variável de ambiente CHROME_BIN :

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

Edifício para distribuição

yarn build