没有完整的框架,如Angular,Knockout等,任何人都可以推荐一个简单数据绑定的jQuery插件吗?
购物车一页应用程序需要在ajax完成后更新页面上的某些元素。只需要遍历字段并更新用户界面。
是的,我知道我可以自己写点东西,但是如果已经存在某些东西,我不想重新发明轮子。
我的研究引导我jquery.bindings - 但它不受欢迎(只有一个贡献者)
建议?
答案 0 :(得分:3)
查看rivets.js。
铆钉是轻量级( 3.4kb缩小和gzip压缩)和强大的数据绑定和模板库。
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找到更多很酷的功能。
答案 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"> </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>