vue remote template

vue-удаленный-шаблон

Миксин Vue.js для получения шаблона через Ajax

Краткое содержание

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

Приведенный выше код извлекает фрагмент HTML из /hello через Ajax. Мы называем этот удаленный шаблон . Удаленные шаблоны компилируются в шаблоны Vue и используются для построения дерева DOM в целевом элементе <div> .

Привязки ввода формы

Когда извлекается удаленный шаблон, компонент Vue создается динамически.

А если удаленные шаблоны содержат директивы v-model , данные компонента инициализируются с помощью функции getInitialData пакета vue-data-scooper.

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

Приведенный выше удаленный шаблон устанавливает для свойства user.name компонента строку «Алиса».

Исходные данные

Дата ответа от внутреннего сервера может быть строкой или данными JSON.

В первом случае строка будет интерпретироваться как удаленный шаблон.

В последнем случае данные JSON должны иметь ключ template и дополнительный ключ data . Значение ключа template будет интерпретироваться как удаленный шаблон. Значение ключа data будет использоваться в качестве исходных данных компонента Vue.

Например, когда сервер возвращает следующие данные JSON:

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

Тогда результирующим фрагментом HTML будет <div>Hello, world!</div> .

Обратите внимание, что исходные данные, предоставленные данными JSON с сервера, перезаписывают данные, установленные директивами v-model .

Расширения

Если вы хотите инициализировать свойства компонента, которые не привязаны к вводу через директиву v-model , вы должны предоставить расширение .

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

Расширение — это миксин, который будет использоваться при создании компонента.

Вы можете зарегистрировать расширения в свойстве 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
      }
    }
  } )
} )

Имя расширения должно быть указано атрибутом data-extension корневого элемента удаленного шаблона:

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

Приведенный выше шаблон создает следующий фрагмент HTML:

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

метод visit

Вы можете вызвать метод visit , чтобы переключить удаленный шаблон.

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

Когда пользователь нажимает эту кнопку в браузере, выполняется Ajax-доступ к /goodbye и извлекается удаленный шаблон.

Если корневой элемент вновь полученного шаблона имеет атрибут data-title , его значением устанавливается заголовок документа.

Корневой элемент вновь полученного шаблона имеет атрибут data-url , его значение используется для добавления записи в историю браузера с помощью метода window.history.pushState().

Вот пример удаленного шаблона:

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

Если вы используете метод visit для элемента a , вы можете опустить аргумент этого метода. Значение href элемента a интерпретируется как путь к удаленному шаблону.

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

Обратите внимание, что вы должны запретить действие по умолчанию, чтобы браузер фактически не посещал указанный путь.

метод submit

Вы можете вызвать метод submit для отправки данных формы с помощью вызова 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 >

Когда пользователь нажимает кнопку «Обновить», запрос Ajax через метод PATCH отправляется в /users/123 .

Если сервер возвращает текст, он используется как удаленный шаблон для отображения результата. Если сервер возвращает объект JSON, он должен содержать ключ templatePath , значение которого используется для выполнения другого запроса Ajax для получения удаленного шаблона.

Обратите внимание, что метод submit должен вызываться для элемента <form> . Вы не можете вызвать его для элементов внутри формы.

Также обратите внимание, что метод вызова Ajax определяется значением скрытого элемента с именем _method .

Демо

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

Настройка разработки

 # install dependencies
yarn install

# test
yarn test

Для запуска теста вам понадобится Google Chrome версии 59 или выше. Если вы используете google-chrome-beta , экспортируйте переменную среды CHROME_BIN :

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

Здание для раздачи

yarn build