HTML Templating Engines and Liquid

Question

I'm trying to get my head round templating engines and if there is something suitable for my requirements.

I'd like to specify HTML and provide dynamic functionality from within the HTML itself. For example, say I had a check box on a page

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

I'd like to specify logic within HTML so that I display more content only if that checkbox has been checked, eg

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

Now, it is likely that liquid will be used to provide dynamic functionality based on a data store. So it'd also be nice to use the same liquid syntax to make the form dynamic (ie use liquid syntax in the if conditional above).

Is it possible to write a 'js engine', perhaps using jquery, that I could include in my web pages that would allow me to use liquid syntax but bind to variables in the 'js engine' as well as the data store to make my content dynamic?

Or, is there a better approach?

Answer 1

I would recommend using Vue.js ( https://vuejs.org/ ).

The template engine is very easy to learn, and provides all the functionality you mention.

Here is a working example of your scenario:

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

But all you need to do is initialise Vue:

new Vue({
  el: '#app',
  data: {
    showData: false
  }
});

and write the template data:

 <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>

I've written a introduction guide to Vue.js here https://steveedson.co.uk/vuejs-intro/

You can also bind to other text inputs, data from ajax sources etc:

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

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

And everything will update automatically.

---

As an alternative to Vue.js, there is also:

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