vue remote template

vue-リモート-テンプレート

Ajax 経由でテンプレートを取得するための Vue.js ミックスイン

あらすじ

 < 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キーの値はVueコンポーネントの初期データとして使用されます。

たとえば、サーバーが次の JSON データを返した場合:

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

この場合、結果の HTML フラグメントは<div>Hello, world!</div>になります。

サーバーからの JSON データによって提供される初期データは、 v-modelディレクティブによって設定されたデータを上書きすることに注意してください。

拡張機能

v-modelディレクティブを介して入力にバインドされていないコンポーネントのプロパティを初期化する場合は、 extension を提供する必要があります。

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

ユーザーがブラウザ上でこのボタンをクリックすると、 /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メソッド

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 >

ユーザーが「更新」ボタンをクリックすると、 PATCHメソッドを介した Ajax リクエストが/users/123に送信されます。

サーバーがテキストを返した場合、それは結果を表示するためのリモート テンプレートとして使用されます。サーバーが JSON オブジェクトを返す場合、そのオブジェクトにはtemplatePathキーが含まれている必要があります。このキーの値は、リモート テンプレートを取得するために別の Ajax リクエストを行うために使用されます。

submitメソッドは<form>要素で呼び出す必要があることに注意してください。フォーム内の要素に対して呼び出すことはできません。

また、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