หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

vue-remote-แม่แบบ

Vue.js mixin เพื่อดึงเทมเพลตผ่าน 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 ของส่วนประกอบเป็นสตริง "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 คุณต้องระบุ ส่วนขยาย 

 // 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
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด