Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Data binding to Mustache templates? (preferably clean and simple)

What I am after is a piece of code that could provide me a clean and simple one-way solution to bind the changes from DOM to the object that is used to render it.

Example: And object

{name: 'Joe'}

is used to render the Mustache template

<div><input val="{{name}}" /></div>

How can I match the change event in the inputfield to the correct property?

What about iterations?

{{#users}}
<div><input val="{{name}}" /></div>
{{/users}}

Is there a such thing?

Edit: And yes, I am aware of Backbone, Angular, Ember, younameit. However, what I need is a specific case to Mustache/Handlebars.

like image 767
crappish Avatar asked Dec 16 '13 19:12

crappish


People also ask

What is in Mustache template?

The Mustache templates consist of tag names surrounded by { { } } (which resemble mustaches – hence the name) and are backed by a model object containing the data for the template.

How do I render a Mustache in HTML?

render = function (template, view, partials) { return this. compile(template)(view, partials); }; This is the most basic form of templating with mustache. Let's see the other methods available for creating more organized code.

What is Mustache programming?

Mustache is a web template system with implementations available for ActionScript, C++, Clojure, CoffeeScript, ColdFusion, Common Lisp, Crystal, D, Dart, Delphi, Elixir, Erlang, Fantom, Go, Haskell, Io, Java, JavaScript, Julia, Lua, .


3 Answers

Ractive is exactly this. Mustache with data binding. https://ractive.js.org

like image 114
sakabako Avatar answered Oct 04 '22 13:10

sakabako


What you are asking for called Angular.js

There is little bit different approach in other similar frameworks like knockout.js, batman.js etc.

Check sample todo application to see how different framework do it.

UPDATE:

On the other hand, if all your "bindings" are going to be simple and you do not care much about syntax there are two approaches that you can use with just jquery in order to minimize ammount of code working with input fields:

  1. one input field per model field and just one model

var model = {
  a: 1,
  b: 2,
  c: 3
}
$('#myForm').on('blur', 'input', function(e) {
  var $this = $(this),
    field = $this.data('model')
  model[field] = $this.val()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='myForm'>
  <input type='text' data-model='a' />
  <input type='text' data-model='b' />
  <input type='text' data-model='c' />
</form>
  1. kinda extension of first one you can grouping elements together if you have multiple models and multiple fields per model. Good example is table editor, when each row bound to element in array and has several fields bound to cells in a row

js

var models = { modelA : {...}, modelB: {...}}

$('#myForm').on('blur', 'input', function(e) {
   var $this = $(this), field = $this.data('field')
   , model = $this.data('model') 
   // last line can be smth like $this.closest('div.group').data('model')

   models[model][field] = $this.val()   
})

So to sum up your example:

 {{#users}}
   <div><input data-model='users' data-index='{{ $index }}' val="{{name}}" /></div>
 {{/users}} 

 $('#myForm').on('blur', 'input', function(e) {
    var $this = $(this), index = $this.data('index')
    , model = $this.data('model') 
    window.data[model][index][field] = $this.val()   
 })
like image 45
vittore Avatar answered Oct 04 '22 11:10

vittore


Check jtmpl, it should exactly fit your need—render a Mustache template and keep DOM synchronized with model at all times.

Collections and node attributes are supported and your example syntax should work as is (just correct "val" -> "value").

like image 35
atmin Avatar answered Oct 04 '22 12:10

atmin