jQuery的數據綁定庫或插件建議

Question

停止缺乏完整的框架，如Angular，Knockout等，誰能推薦一個jQuery插件來簡單的數據綁定？

購物車需要一個頁面的應用程序，需要在ajax完成後更新頁面上的某些元素。只需要遍歷字段並更新用戶界面。

是的，我知道我可以自己寫點東西，但是如果已經有東西出現，我不想重新發明輪子。

我的研究使我jquery.bindings - 但它不是流行的（只有一個貢獻者）

建議？

Answer 1

查找到rivets.js。

鉚釘是一個輕量級（3.4kb縮小和gzipped）和強大的數據綁定和模板庫。

Rivets.js是完全無關的關於您的模型/控制器層，並與採用的事件驅動模型，例如Backbone.js和Stapes.js現有的庫工作得很好。它附帶一個內置適配器，用於使用ES5原生訂閱純JS對象，但可以用Watch.JS適配器或Object.observe適配器替換。

一些你外的開箱即用的Rivets.js特點：

• 雙向數據綁定和DOM節點。
• 通過依賴關係映射計算屬性。
• 格式化程序允許通過管道進行變異值。
• 迭代綁定數組中的綁定項目。
• 自定義事件處理程序，以適應您理想的工作流程。
• 用於輕鬆擴展任何核心概念的統一API。

---

鉚釘使用DOM-based templating system：

相反解析和編譯模板字符串轉換爲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> 

你可以使用鉚釘樣綁定數據：

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找到。

Answer 2

只要您與您的類名稱一致並返回了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>