数据绑定到Mustache模板?(最好干净简单）

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

本文关键字：简单 Mustache 模板 数据绑定      更新时间：2023-09-26

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

示例：和对象

{name: 'Joe'}

用于渲染Mustache模板

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

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

迭代呢？

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

有这样的东西吗？

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

Racive就是这样。带有数据绑定的Mustache。https://ractive.js.org

您想要的是Angular.js

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

查看示例todo应用程序，看看不同的框架是如何做到这一点的

更新：

另一方面，如果所有的"绑定"都很简单，并且不太关心语法，那么有两种方法可以只与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>

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

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

检查jtmpl，它应该完全符合您的需求—渲染Mustache模板，并始终保持DOM和模型同步。

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

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

好吧，设法找到了一种通过shadow-dom解决方案进行简单数据绑定的方法。这不是一个完美的解决方案，但目前可以。

相关文章：