vue remote template

vue-remote-template

Mixin Vue.js untuk mengambil template melalui Ajax

Ringkasan

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

Kode di atas mengambil fragmen HTML dari /hello melalui Ajax. Kami menyebutnya templat jarak jauh . Templat jarak jauh dikompilasi ke dalam templat Vue, dan digunakan untuk membuat pohon DOM ke elemen <div> target.

Pengikatan Masukan Formulir

Saat templat jarak jauh diambil, komponen Vue dibuat secara dinamis.

Dan jika templat jarak jauh berisi arahan v-model , data komponen diinisialisasi menggunakan fungsi getInitialData dari paket vue-data-scooper.

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

Templat jarak jauh di atas menyetel properti user.name komponen ke string "Alice".

Data Awal

Tanggal respons dari server backend dapat berupa string atau data JSON.

Dalam kasus sebelumnya, string akan ditafsirkan sebagai templat jarak jauh.

Dalam kasus terakhir, data JSON harus memiliki kunci template dan kunci data opsional. Nilai kunci template akan diartikan sebagai templat jarak jauh. Nilai kunci data akan digunakan sebagai data awal komponen Vue.

Misalnya, ketika server mengembalikan data JSON berikut:

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

Kemudian, fragmen HTML yang dihasilkan adalah <div>Hello, world!</div> .

Perhatikan bahwa data awal yang disediakan oleh data JSON dari server menimpa kumpulan data oleh arahan v-model .

Ekstensi

Jika Anda ingin menginisialisasi properti komponen yang tidak terikat pada input melalui direktif v-model , Anda harus menyediakan ekstensi .

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

Ekstensi adalah mixin yang akan digunakan saat komponen dibuat.

Anda dapat mendaftarkan ekstensi ke properti 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
      }
    }
  } )
} )

Nama ekstensi harus ditentukan oleh atribut data-extension dari elemen akar templat jarak jauh:

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

Templat di atas menghasilkan fragmen HTML berikut:

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

metode visit

Anda dapat memanggil metode visit untuk mengganti templat jarak jauh.

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

Ketika pengguna mengklik tombol ini di browser, akses Ajax ke /goodbye dijalankan dan template jarak jauh diambil.

Jika elemen akar template yang baru diambil memiliki atribut data-title , nilainya diatur ke judul dokumen.

Dan, elemen root template yang baru diambil memiliki atribut data-url , nilainya digunakan untuk menambahkan entri ke riwayat browser menggunakan metode window.history.pushState().

Berikut ini contoh templat jarak jauh:

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

Jika Anda menggunakan metode visit pada elemen a , Anda dapat menghilangkan argumen pada metode tersebut. Nilai href elemen a ditafsirkan sebagai jalur templat jarak jauh.

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

Perhatikan bahwa Anda harus mencegah tindakan default agar browser tidak mengunjungi jalur yang ditentukan sebenarnya.

metode submit

Anda dapat memanggil metode submit untuk mengirimkan data formulir melalui panggilan 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 >

Ketika pengguna mengklik tombol "Perbarui", permintaan Ajax melalui metode PATCH dikirimkan ke /users/123 .

Jika server mengembalikan teks, itu digunakan sebagai templat jarak jauh untuk menampilkan hasilnya. Jika server mengembalikan objek JSON, objek tersebut harus berisi kunci templatePath , yang nilainya digunakan untuk membuat permintaan Ajax lain guna mengambil template jarak jauh.

Perhatikan bahwa metode submit harus dipanggil pada elemen <form> . Anda tidak dapat memanggilnya pada elemen dalam formulir.

Perhatikan juga bahwa metode panggilan Ajax ditentukan oleh nilai elemen tersembunyi yang bernama _method .

Demo

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

Pengaturan Pengembangan

 # install dependencies
yarn install

# test
yarn test

Anda memerlukan Google Chrome versi 59 atau lebih tinggi untuk menjalankan pengujian. Jika Anda menggunakan google-chrome-beta , ekspor variabel lingkungan CHROME_BIN :

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

Bangunan untuk distribusi

yarn build