HTML 템플릿 엔진 및 액체

Question

나는 템플릿 엔진과 내 요구 사항에 맞는 것이 있다면 머리를 써야합니다.

HTML을 지정하고 HTML 자체에서 동적 기능을 제공하고 싶습니다. 예를 들어, 나는

<label><input type="checkbox" id="cbox1" value="first_checkbox"> This is my checkbox</label> 

은 내가 더 그 체크 박스가 체크 된 경우에만 내용, 예를 들어, 표시 할 수 있도록 HTML 내에서 논리를 지정하고 싶은 페이지에서 체크 박스를 가지고 말

// if #cbox1.checked == true 
    <h1>The check box is checked</h1> 
// else 
    <h1>The check box is not checked</h1> 
// end 

지금, liquid 데이터 저장소에 기초하여 동적 인 기능을 제공하기 위해 사용될 가능성이있다. 따라서 폼을 동적으로 만들기 위해 동일한 액체 구문을 사용하는 것도 좋을 것입니다 (위의 if 조건에서 액체 구문 사용).

jquery를 사용하여 'js engine'을 작성할 수 있습니다. 이는 웹 페이지에 액체 구문을 사용할 수 있지만 'js 엔진'의 변수와 데이터에 바인딩 할 수 있습니다 내 콘텐츠를 동적으로 저장 하시겠습니까?

아니면 더 나은 방법이 있습니까?

Answer 1

Vue.js (https://vuejs.org/)를 사용하는 것이 좋습니다.

템플릿 엔진은 배우기가 매우 쉽고 언급 한 모든 기능을 제공합니다. 여기

는 시나리오의 작업 예입니다

https://jsbin.com/kikaxecogo/edit?html,output

그러나 당신이 할 필요가 초기화 뷰입니다 :

new Vue({ 
    el: '#app', 
    data: { 
    showData: false 
    } 
}); 

및 템플릿 데이터 쓰기 :

<input type="checkbox" v-model="showData"> 

<div v-if="showData"> 
    This is visible using v-if 
</div> 

<div v-else> 
    The check box is not checked 
</div> 

을

여기 Vue.js 소개 가이드를 작성했습니다,477,

당신은 다른 텍스트 입력에 결합 할 수있는, 아약스 소스 등의 데이터 :

<input type="text" v-model="name"> 

<p>Hello {{ name }}</p> 

그리고 모든 것이 자동으로 업데이트됩니다. Vue.js하는 대신

---

도있다 :

• https://facebook.github.io/react/
• https://angularjs.org/