Javascript 数据绑定到胡须模板？（最好干净、简单）

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

示例：和对象

{name: 'Joe'}

用于渲染胡子模板

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

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

迭代呢

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

{{{#用户}
{{/用户}

有这样的事吗

---

编辑：是的，我知道脊梁、棱角、余烬、younameit。然而，我需要的是一个关于胡子/把手的特殊案例。

你要的是什么

在其他类似的框架（如batman.js等）中，方法略有不同

查看不同的框架是如何做到这一点的

更新：

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

每个模型字段一个输入字段，仅一个模型

var模型={
答:1,，
b:2，
c:3
}
$（'#myForm'）。关于（'blur'，'input'，函数（e）{
变量$this=$（this），
字段=$this.data（'model'））
模型[字段]=$this.val（）
})

---

很好，我们找到了一种通过影子dom解决方案进行简单数据绑定的方法。这不是一个完美的解决方案，但现在就可以了。

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

---

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

Ractive就是这样。带有数据绑定的小胡子

我建议您看看

vue.js

——它现在是一个被广泛采用的框架，比Angular（缩小了600kb，缩小了60kb，如果压缩了20kb）轻得多，并且使用了类似于mustache的语法。

指定了如何完全按照您指定的方式处理空列表（空检查）和非空列表迭代。你测试过你的代码吗？我知道空列表等。我想要的是数据绑定。如果你说的绑定是双向绑定，那么看看vittore建议的AngularJS。Mustach只是在给定对象的情况下通过传递来呈现模板。您可能应该在问题中添加一个要求，即您不愿意使用AngularJS、Ember、主干或任何其他实现数据绑定的库。+1这就是我要回答的。具体来说，请查看本教程（）.Nope。我很清楚主干、角度、余烬等。我想要的是简单的单向绑定frmo，将渲染的输入绑定到对象。@crapish mustach不是为处理数据绑定而设计的。您可以使用jQuery读取部分模板的输入过程，并将其注入html元素，但实际上您需要重新实现AngularJS默认支持的功能。除非您确实关心添加另一个库，在这里重新发明轮子并不是一个很好的论据。@vittore这与我一直在测试的东西很接近，但是，a）我不希望用额外的属性污染DOM，B）仍然能够处理迭代等等，这似乎有点像PITA。我想唯一剩下的就是解析Mustache变量的模板：PWhoa！那看起来非常好，正是我想要的！谢谢我将检查它，如果它匹配，我将接受此作为回答。：）（哦，是的，可能应该是“value”：D）不幸的是，这也不符合我的要求，因为它还可以进行数据渲染，在这种情况下，我需要单独进行数据渲染：/我认为shadowdom是实验性的，并没有得到广泛的支持。也许shadowdom是一个错误的术语。也许影子dom-like解决方案是正确的-将dom结构复制到内存中并在内存中进行数据绑定。这是开发人员使用jQuery 8年来一直在做的事情。这只是正常的编程，没有术语，因为它非常基本。好吧，这不是您的基本解决方案，而不是在给定数据的上下文中进行模拟，但不管怎样，只要我让它工作，对我来说就足够了。至少现在是这样。