jQuery数据绑定库或插件推荐

时间:2014-10-07 21:43:02

标签: jquery ajax plugins data-binding jquery-plugins

没有完整的框架,如Angular,Knockout等,任何人都可以推荐一个简单数据绑定的jQuery插件吗?

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

是的,我知道我可以自己写点东西,但是如果已经存在某些东西,我不想重新发明轮子。

我的研究引导我jquery.bindings - 但它不受欢迎(只有一个贡献者)

建议?

2 个答案:

答案 0 :(得分:3)

查看rivets.js

铆钉是轻量级( 3.4kb缩小和gzip压缩)和强大的数据绑定和模板库。

  

Rivets.js与您的模型/控制器层完全无关,适用于采用事件驱动模型的现有库,例如Backbone.jsStapes.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找到更多很酷的功能。

答案 1 :(得分: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>