jQuery数据绑定库或插件推荐

Question

jQuery数据绑定库或插件推荐

jqueryajaxpluginsdata-bindingjquery-plugins

6

除了完整的框架（如Angular、Knockout等），有没有人推荐一个jQuery插件来进行简单的数据绑定？这是一个购物车单页应用程序所需的，需要在ajax完成后更新页面上的某些元素。只需要遍历字段并更新用户界面即可。

是的，我知道我可以自己编写代码，但如果已经有现成的东西，我不想重复造轮子。

我的研究引导我到jquery.bindings - 但它不太流行（只有一个贡献者）。

有什么建议吗？

- Simon

2个回答

0

只要你在类名和返回的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>

- Richard Wagner

好奇一下，这个堆栈片段演示了什么...？o.0 - T J

感谢您抽出时间回答我的问题，但这并不适用于该应用程序。 - Simon

这是我第一次使用Stackoverflow。我试图显示格式化的代码。我会继续尝试它。 - Richard Wagner

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T J · Accepted Answer

请尝试使用rivets.js。

rivets是一个轻量级（3.4kb压缩和gzip后）而强大的数据绑定和模板库。

Rivets.js对于您的模型/控制器层完全不关心，并且与采用事件驱动模型的现有库（如Backbone.js和Stapes.js）非常配合。它附带了一个内置适配器，可以使用ES5本机订阅普通JS对象，但是这可以替换为Watch.JS适配器或Object.observe适配器。

Rivets.js提供的一些开箱即用的功能：

双向数据绑定到DOM节点。

通过依赖映射计算属性。

格式化程序，允许通过管道突变值。

迭代绑定以绑定数组中的项。

自定义事件处理程序以适合您的理想工作流程。

统一的API，可轻松扩展任何核心概念。

Rivets使用基于DOM的模板系统：

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

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

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

在以下HTML中：

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

您可以使用Rivets绑定数据，例如：

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($('#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>

rivets将根据数组中的项创建n个列表。

在指南中还有许多更酷的功能。