jQuery数据绑定库或插件推荐

在缺少Angular、Knockout等成熟框架的情况下，有人能推荐一个jQuery插件来实现简单的数据绑定吗

购物车单页应用程序需要它，它需要在ajax完成后更新页面上的某些元素。只需要遍历字段并更新用户界面

是的，我知道我可以自己写一些东西，但是如果已经有了一些东西，我不想重新发明轮子

我的研究让我找到了——但并不流行（只有一个投稿人）

---

建议？

只要与类名和返回的JSON字段名一致，就可以使用下面的代码更新数据（注意：我没有测试这段代码）。希望这有帮助。我找不到任何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">&nbsp;</span><br />
Lastname: <span class="lastname">&nbsp;</span><br />
Items:<br />

<table>
<tr><th>Description</th><th>Quantity</th><th>Price</th></tr>
<tr><td class="desc">&nbsp;</td><td class="quantity">&nbsp;</td><td class="price">&nbsp;</td></tr>
<tr><td class="desc">&nbsp;</td><td class="quantity">&nbsp;</td><td class="price">&nbsp;</td></tr>
</table

</form>

名字：

姓氏：

项目：

描述数量价格
调查

铆钉是一个轻量级（3.4kb小型化和gzip）和强大的数据绑定和模板库

js完全不知道您的模型/控制器层，并且与使用事件驱动模型（如和）的现有库配合良好。它附带了一个内置适配器，用于使用ES5本机订阅普通JS对象，但是可以用适配器或适配器替换

您可以使用铆钉从盒子中获得的一些功能。js：


与DOM节点之间的双向数据绑定
通过依赖关系映射计算属性
允许通过管道对值进行变异的格式化程序
数组中绑定项的迭代绑定
自定义事件处理程序以适合理想的工作流
用于轻松扩展任何核心概念的统一API


铆钉使用：

与解析模板字符串并将其编译为HTML不同，Rivets.js将模型直接连接到DOM的现有部分，这些部分直接在DOM节点上包含绑定声明和控制流指令。绑定到父DOM节点时，只需传入模型，其余部分由Rivets.js处理

简而言之，例如，假设您希望在产品对象中显示数据，如：

var productInfo= {
 name: "test",
 price: 1000
}

在以下HTML中：

<ul id="product">
  <li>Name</li>
  <li>Price</li>
</ul>

相应的铆钉模板为：

可以使用
rveach
使用迭代绑定，如：

<ul class="products" data-rv-each-product="products">
  <li data-rv-text="product.name"></li>
  <li data-rv-text="product.price"></li>
</ul>






铆钉将根据数组中的项目创建列表的数量

您可以在中找到更多很酷的功能。
出于好奇，堆栈片段演示了什么。。。？o、 0感谢您抽出时间回答我的问题，但它不适合该应用程序。这是我第一次使用Stackoverflow。我试图显示格式化的代码。我会玩一些。谢谢你花时间回答我的问题。我开始基于这个问题推出自己的解决方案：但我可以看到在不久的将来，我有能力做更多的事情。我去看看。非常感谢。
<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($('#product'), {
  product: ProductArray // where productArray is an array of products
});

<ul class="products" data-rv-each-product="products">
  <li data-rv-text="product.name"></li>
  <li data-rv-text="product.price"></li>
</ul>