vue remote template
1.0.0
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 지시어를 통해 입력에 바인딩되지 않은 구성 요소의 속성을 초기화하려면 확장을 제공해야 합니다.
// 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 객체를 반환하는 경우 원격 템플릿을 가져오기 위해 다른 Ajax 요청을 만드는 데 사용되는 값인 templatePath 키를 포함해야 합니다.
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
