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 引擎”，也许使用 jquery，我可以将它包含在我的网页中，这将允许我使用流动语法但绑定到“js 引擎”以及数据存储中的变量让我的内容动态化？

或者，有更好的方法吗？

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>

我在这里https://steveedson.co.uk/vuejs-intro/写了一篇Vue.js的介绍指南

您还可以绑定到其他文本输入、来自 ajax 源的数据等：

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

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

一切都会自动更新。

---

作为 Vue.js 的替代品，还有：

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