jQuery डेटा बाइंडिंग लाइब्रेरी या प्लगइन अनुशंसा

Question

कोणीय, नॉकआउट इत्यादि जैसे पूर्ण उड़ा फ्रेमवर्क से कम रोकना, क्या कोई साधारण डेटा बाइंडिंग के लिए एक jQuery प्लगइन की सिफारिश कर सकता है?

एक शॉपिंग कार्ट के लिए एक पृष्ठ ऐप की आवश्यकता है जिसे AJAX पूर्ण होने के बाद पृष्ठ पर कुछ तत्व अपडेट करने की आवश्यकता है। बस फ़ील्ड के माध्यम से पुन: प्रयास करने और उपयोगकर्ता इंटरफ़ेस को अपडेट करने की आवश्यकता है।

हाँ, मुझे पता है कि मैं खुद कुछ लिख सकता हूं, लेकिन अगर मैं पहले से कुछ बाहर कर रहा हूं तो मैं पहिया को फिर से शुरू नहीं करना चाहता हूं।

मेरे शोध मुझे jquery.bindings करने के लिए नेतृत्व किया है - लेकिन यह (केवल एक योगदानकर्ता)

सुझाव लोकप्रिय नहीं है?

Answer 1

rivets.js में देखो:

$.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 ऑब्जेक्ट देता है।

rivets एक लाइटवेट (3.4kb minified और gzipped) और शक्तिशाली डेटा बाइंडिंग और टेम्पलेटिंग लाइब्रेरी है।

Rivets.js अपने मॉडल/नियंत्रक परत के बारे में पूरी तरह से नास्तिक है और मौजूदा पुस्तकालयों कि इस तरह के Backbone.js और Stapes.js के रूप में एक घटना पर ही आधारित मॉडल को रोजगार के साथ अच्छी तरह से काम करता है। यह ES5 मूल निवासी का उपयोग करके सादे जेएस ऑब्जेक्ट्स की सदस्यता लेने के लिए एक अंतर्निहित एडाप्टर के साथ जहाज करता है, हालांकि इसे Watch.JS एडाप्टर या Object.observe एडाप्टर के साथ प्रतिस्थापित किया जा सकता है।

सुविधाओं आप Rivets.js के साथ बाहर के- the- बॉक्स में से कुछ:

• द्वि-दिशात्मक डेटा के लिए और डोम नोड से बाध्यकारी।
• निर्भरता मानचित्रण के माध्यम से गणना गुण।
• प्रारूपक पाइपिंग के माध्यम से उत्परिवर्तन मूल्यों को अनुमति देने के लिए।
• एक सरणी में बाध्यकारी वस्तुओं के लिए इटरेशन बाध्यकारी।
• कस्टम ईवेंट हैंडलर आपके आदर्श वर्कफ़्लो को फिट करने के लिए।
• किसी भी मूल अवधारणाओं को आसानी से विस्तारित करने के लिए समान API।

---

Rivets DOM-based templating system उपयोग करता है:

पार्स करने और HTML में टेम्पलेट तार संकलन करने के बजाय

, Rivets.js डोम की मौजूदा भागों कि बाध्यकारी घोषणाओं और नियंत्रण को रोकने के लिए तारों के लिए अपने मॉडल सीधे सीधे डीओएम नोड्स पर प्रवाह निर्देश। जब आप माता-पिता डॉम नोड और Rivets.js को बाध्य करते हैं तो आप बस अपने मॉडल में गुजरते हैं। बाकी का ख्याल रखता है। निम्न HTML में

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

:

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

आपका तरह रिवेट्स का उपयोग कर डेटा बाध्य कर सकते हैं

संक्षेप में, उदाहरण के लिए आप की तरह एक उत्पाद वस्तु में डेटा प्रदर्शित करना चाहते हैं मान :

rivets.bind($('#product'), { 
    product: productInfo // product will be the alias name inside HTML template 
}); 

और संबंधित rivets टेम्पलेट हो जाएगा:

<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 ऑब्जेक्ट (वैकल्पिक)

---

या यदि आप उत्पाद वस्तुओं की एक श्रृंखला को बाध्य कर रहे हैं :

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 प्लगइन्स नहीं मिला जो आप खोज रहे हैं।

{ '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>