没有成熟的框架，如 Angular、Knockout 等，谁能推荐一个 jQuery 插件来进行简单的数据绑定？
购物车单页应用需要在 ajax 完成后更新页面上的某些元素。只需要遍历字段并更新用户界面。
是的，我知道我可以自己写一些东西，但如果已经有东西了，我不想重新发明轮子。
我的研究让我找到了jquery.bindings - 但它并不受欢迎（只有一位贡献者）
建议？
【问题讨论】：
标签： jquery ajax plugins data-binding jquery-plugins
查看rivets.js。
rivets 是一个轻量级（3.4kb 压缩和压缩）和强大的数据绑定和模板库。
Rivets.js 与您的模型/控制器层完全无关，并且可以很好地与采用事件驱动模型的现有库（例如 Backbone.js 和 Stapes.js）配合使用。它附带一个内置适配器，用于使用 ES5 本机订阅普通 JS 对象，但是可以将其替换为 Watch.JS 适配器或 Object.observe 适配器。
您可以通过 Rivets.js 获得一些开箱即用的功能：
- 与 DOM 节点之间的双向数据绑定。
- 通过依赖映射计算属性。
- 允许通过管道改变值的格式化程序。
- 用于绑定数组中的项的迭代绑定。
- 自定义事件处理程序以适合您的理想工作流程。
- 统一的 API 可轻松扩展任何核心概念。
铆钉使用DOM-based templating system:
Rivets.js 不是将模板字符串解析和编译成 HTML，而是将您的模型直接连接到 DOM 的现有部分，这些部分直接在 DOM 节点上包含绑定声明和控制流指令。您只需在绑定到父 DOM 节点时传入您的模型，其余的由 Rivets.js 处理。
简而言之，例如假设您想在产品对象中显示数据，例如：
var productInfo= {
name: "test",
price: 1000
}
在以下 HTML 中：
<ul id="product">
<li>Name</li>
<li>Price</li>
</ul>
您可以使用铆钉来绑定数据，例如：
rivets.bind($('#product'), {
product: productInfo // product will be the alias name inside HTML template
});
而对应的铆钉模板将是：
<ul id="product">
<li rv-text="product.name"></li>
<li v-text="product.price"></li>
</ul>
或更多语义：
<ul id="product">
<li data-rv-text="product.name"></li>
<li data-rv-text="product.price"></li>
</ul>
rivets.bind 方法接受模板元素、模型数据以及您希望从主铆钉对象覆盖的任何选项（可选）
或者，如果您要绑定一个产品对象数组：
rivets.bind($('#product'), {
product: ProductArray // where productArray is an array of products
});
您可以使用 rv-each 来使用迭代绑定，例如：
<ul class="products" data-rv-each-product="products">
<li data-rv-text="product.name"></li>
<li data-rv-text="product.price"></li>
</ul>
铆钉将根据数组中的项目创建n的列表数量。
您可以在guide 中找到更多很酷的功能。
【讨论】：
只要你的类名和返回的 JSON 字段名一致，你就可以用下面的代码更新数据（注意：我没有测试这个代码）。希望这可以帮助。除了您找到的可以满足您的需求的 jQuery 插件之外，我找不到任何 jQuery 插件。
$.ajax({
url: "/GetCart",
type: "GET",
dataType: "json",
success: function (response) {
var r = jQuery.parseJSON(response);
$.each(r, function(key,value) {
if (jQuery.type(value) == "string") {
$('.'+key).html(value);
}
else if (jQuery.type(value) == "array") {
$.each(value, function(aindex,avalue) {
$.each(avalue, function(ikey,ivalue) {
$('.'+ikey.toString())[aindex].html(ivalue);
}
}
}
}
}
});
假设 GetCart 返回以下 JSON 对象：
{ 'firstname': 'Bob', 'lastname': 'Ross', 'items': [ { 'desc' : 'car', 'quantity': 1, 'price': 15000.00}, { 'desc' : 'tire', 'quantity': 4, 'price': 200.00} ] }
还假设您有以下 HTML
<form>
Firstname: <span class="firstname"> </span><br />
Lastname: <span class="lastname"> </span><br />
Items:<br />
<table>
<tr><th>Description</th><th>Quantity</th><th>Price</th></tr>
<tr><td class="desc"> </td><td class="quantity"> </td><td class="price"> </td></tr>
<tr><td class="desc"> </td><td class="quantity"> </td><td class="price"> </td></tr>
</table
</form>
【讨论】：