HTMLテンプレートエンジンと液体

Question

テンプレートエンジンと私の要求に適したものがあれば、私は頭の中に入れようとしています。

HTMLを指定して、HTML自体の中から動的機能を提供したいと思います。例えば、私は私が、例えば、そのチェックボックスがチェックされた場合にのみ、より多くのコンテンツを表示するようにHTML内のロジックを指定したいページ

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

上のチェックボックスを持っていたと言います

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

さて、liquidがデータストアに基づいて動的な機能を提供するために使用される可能性があります。したがって、同じ液体シンタクスを使用してフォームを動的にすることもいいでしょう（つまり、if条件で液体シンタクスを使用する）。

jqueryを使用して、おそらくjqueryを使用して、液体構文を使用することができますが、「jsエンジン」の変数とデータにバインドすることができるWebページに含めることは可能ですか私のコンテンツを動的にするストア？

または、より良いアプローチがありますか？

Answer 1

Vue.js（https://vuejs.org/）の使用をお勧めします。

テンプレートエンジンは非常に学習しやすく、あなたが言及したすべての機能を提供します。ここで

はあなたのシナリオの実施例である：

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

しかし、あなたがする必要があるすべては、Vueの初期化です：

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の紹介ガイドを書いていますhttps://steveedson.co.uk/vuejs-intro/

また、他のテキストの入力、AJAXのソースなどからのデータにバインドすることができます

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

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

、すべてが自動的に更新されます。 Vue.jsの代替として

---

もある。

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