vue remote template

vue 远程模板

通过 Ajax 获取模板的 Vue.js mixin

概要

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

上面的代码通过 Ajax 从/hello获取 HTML 片段。我们称此为远程模板。远程模板被编译为 Vue 模板，并用于在目标<div>元素上构建 DOM 树。

表单输入绑定

当获取远程模板时，会动态创建一个 Vue 组件。

如果远程模板包含v-model指令，则使用 vue-data-scooper 包的getInitialData函数初始化组件的数据。

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

上面的远程模板将组件的user.name属性设置为字符串“Alice”。

初始数据

后端服务器的响应日期可以是字符串或 JSON 数据。

在前一种情况下，该字符串将被解释为远程模板。

在后一种情况下，JSON 数据应具有template键和可选data键。 template键的值将被解释为远程模板。 data key的值将作为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"
    }
  }
}

扩展是创建组件时要使用的mixin 。

您可以将扩展注册到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 >

当用户在浏览器上单击此按钮时，将执行对/goodbye的 Ajax 访问并获取远程模板。

如果新获取的模板的根元素具有data-title属性，则其值将设置为文档标题。

并且，新获取的模板的根元素具有data-url属性，其值用于使用 window.history.pushState() 方法向浏览器历史记录添加条目。

这是远程模板的示例：

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

如果对a元素使用visit方法，则可以省略该方法的参数。 a元素的href值被解释为远程模板路径。

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

请注意，您必须阻止默认操作，以便浏览器实际上不会访问指定的路径。

submit方法

您可以通过Ajax调用submit方法来提交表单数据。

 < 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 >

当用户单击“更新”按钮时，通过PATCH方法的 Ajax 请求将提交到/users/123 。

如果服务器返回文本，则将其用作远程模板来显示结果。如果服务器返回 JSON 对象，则它必须包含templatePath键，该键的值用于发出另一个 Ajax 请求以获取远程模板。

请注意，必须在<form>元素上调用submit方法。您不能在表单内的元素上调用它。

另请注意，Ajax 调用的方法是由名称为_method的隐藏元素的值确定的。

演示

请参阅 https://github.com/kuroda/vue-rails-form-b​​uilder-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