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