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 выше).

Можно ли написать «js engine», возможно, используя jquery, который я мог бы включить в мои веб-страницы, которые позволили бы мне использовать жидкостный синтаксис, но привязывать к переменным в «js engine», а также данные сохранить динамический контент?

Или, есть ли лучший подход?

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 здесь https://steveedson.co.uk/vuejs-intro/

Вы также можете связываться с другими текстовыми входами, данные из АЯКС источников и т.д.:

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

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

и все будет обновляться автоматически.

---

В качестве альтернативы Vue.js, есть также:

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