jQuery数据绑定库或插件推荐

Question

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

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

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

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

建议？

Answer 1

查看rivets.js。

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

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

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

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

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

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根据数组中的项目创建多个列表。

您可以在指南中找到更多很酷的功能。