2017-02-22 80 views
0

我試圖讓我的頭部模板化引擎以及是否有適合我的需求的東西。HTML模板引擎和液體

我想指定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條件以上使用液體語法)也是很好的。

是否可以編寫一個'js引擎',也許使用jquery,我可以在我的網頁中包含這些js引擎,使我可以使用液體語法,但綁定到'js引擎'中的變量以及數據存儲以使我的內容動態?

或者,有沒有更好的方法?

回答

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/

你也可以綁定到其他文本輸入,從阿賈克斯來源等數據:

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

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

所有的一切都將自動更新。


作爲替代Vue.js,還存在:

+0

是。看起來很有希望:我正在評論Angular,但感覺我需要更輕量級的東西。 Vue的使用看起來更簡單。 –

+0

我個人認爲Vue非常好。它適用於這樣的小例子,但可以隨項目一起增長,並可用於大型Web應用程序。祝你好運! – SteveEdson