数据绑定到Mustache模板？ （最好干净简单）

Question

我所追求的是一段代码，可以为我提供一个简洁的单向解决方案，将DOM中的更改绑定到用于呈现它的对象。

示例：和对象

{name: 'Joe'}

用于呈现Mustache模板

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

如何将inputfield中的change事件与正确的属性相匹配？

迭代怎么样？

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

有这样的事吗？

编辑：是的，我知道Backbone，Angular，Ember，younameit。但是，我需要的是Mustache / Handlebars的具体案例。

Answer 1

Ractive就是这样。胡子与数据绑定。 https://ractive.js.org

Answer 2

你所要求的叫做Angular.js

在其他类似的框架中，如knockout.js，batman.js等，有一些不同的方法。

检查sample todo application以了解不同的框架是如何做到的。

更新：

另一方面，如果所有的“绑定”都很简单并且您不太关心语法，那么只有jquery可以使用两种方法，以便最大限度地减少使用输入字段的代码量：

1. 每个模型字段一个输入字段，只有一个模型

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>

2. 如果你有多个模型和每个模型多个字段，你可以将元素分组在一起。好的例子是表编辑器，当每一行绑定到数组中的元素并且有几个字段绑定到一行中的单元格时

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()   
})

总结一下你的例子：

 {{#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()   
 })

Answer 3

检查jtmpl，它应该完全符合您的需要 - 渲染一个Mustache模板，并始终保持DOM与模型同步。

支持集合和节点属性，您的示例语法应该按原样工作（只需更正“val” - >“value”）。

Answer 4

好吧，设法找到一种通过阴影dom解决方案进行简单数据绑定的方法。它不是完美的解决方案，但它现在可以做到。

Answer 5

我建议你看看vue.js - 它现在是一个广泛采用的框架，比Angular（600kb对60kb缩小和20kb，如果gzip）轻得多，并使用类似胡子的语法。