HTML 模板引擎和 Liquid

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，我可以将其包含在我的网页中，这将允许我使用流式语法但绑定到 [=26] 中的变量=] 以及使我的内容动态化的数据存储？

或者，有更好的方法吗？

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的替代，还有：

HTML 模板引擎和 Liquid

HTML Templating Engines and Liquid

javascript

jquery

template-engine

liquid