jQuery Data Binding-Bibliothek oder Plugin-Empfehlung

Question

Stoppen kurz von Full-blast-Frameworks wie Angular, Knockout usw., könnte jemand ein jQuery-Plugin zur einfachen Datenbindung empfehlen?

Es ist für eine Einkaufswagen App erforderlich, die bestimmte Elemente auf der Seite nach einem AJAX-Abschluss aktualisieren muss. Ich muss nur durch Felder iterieren und die Benutzeroberfläche aktualisieren.

Ja, ich weiß, ich könnte selbst etwas schreiben, aber ich will das Rad nicht neu erfinden, wenn da draußen schon etwas ist.

Meine Forschung hat mich zu jquery.bindings führen - aber es ist nicht sehr beliebt (nur ein Teilnehmer)

Verbesserungsvorschläge?

Answer 1

Blick in rivets.js.

Nieten ist ein Leichtgewicht (3,4 KB verkleinert und gezippt) und leistungsstarke Datenbindung und Templating-Bibliothek.

Rivets.js ist völlig agnostisch über Ihr Modell/Controller-Schicht und arbeitet gut mit den bestehenden Bibliotheken, die einen ereignisgesteuerten Modell wie Backbone.js und Stapes.js beschäftigen. Es wird mit einem integrierten Adapter zum Abonnieren von einfachen JS-Objekten unter Verwendung von ES5-Natives ausgeliefert. Dies kann jedoch durch einen Adapter Watch.JS oder einen Adapter Object.observe ersetzt werden.

Einige der Funktionen, die Sie mit Rivets.js out-of-the-Box erhalten:

• Bidirektionale Datenbindung zu und von DOM-Knoten.
• Berechnete Eigenschaften über Abhängigkeitszuordnung.
• Formatierer, um Werte durch Rohrleitungen mutieren zu lassen.
• Iterationsbindung zum Binden von Elementen in einem Array.
• Benutzerdefinierte Event-Handler für Ihren idealen Workflow.
• Einheitliche APIs zur einfachen Erweiterung der Kernkonzepte.

---

Nieten verwendet DOM-based templating system:

Statt Parsing und Template-Strings in HTML kompilieren, Rivets.js Drähte Ihre Modelle direkt an bestehende Teile von DOM bis die verbindlichen Erklärungen und Kontrolle enthalten Fließanweisungen direkt auf den DOM-Knoten. Sie übergeben nur Ihre Modelle beim Binden an den übergeordneten DOM-Knoten und Rivets.js kümmert sich um den Rest.

Kurz gesagt, zum Beispiel annehmen, dass Sie die Daten in einem Produkt Objekt angezeigt werden soll, wie:

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

in folgenden HTML:

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

Sie können die Daten binden Nieten wie :

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

Und die entsprechenden Nieten Vorlage wird:

<ul id="product"> 
    <li rv-text="product.name"></li> 
    <li v-text="product.price"></li> 
</ul> 

oder mehr semantisch:

<ul id="product"> 
    <li data-rv-text="product.name"></li> 
    <li data-rv-text="product.price"></li> 
</ul> 

Die rivets.bind Methode, um die Schablonenelement übernimmt, die Modelldaten, sowie alle Optionen, die Sie aus außer Kraft setzen möchten, das Hauptnietenobjekt (optional)

---

Oder wenn Sie ein Array von Produktobjekten binden :

rivets.bind($('#product'), { 
    product: ProductArray // where productArray is an array of products 
}); 

können Sie Iteration Bindungen wie mit rv-each verwenden:

<ul class="products" data-rv-each-product="products"> 
    <li data-rv-text="product.name"></li> 
    <li data-rv-text="product.price"></li> 
</ul> 

Nieten n Anzahl der Listen nach den Elementen in Array erstellen wird.

Es gibt viele weitere coole Funktionen, die Sie in der guide finden können.

Answer 2

Solange Sie mit Ihren Klassennamen und zurückgegebenen JSON-Feldnamen übereinstimmen, können Sie die Daten mit dem folgenden Code aktualisieren (Hinweis: Ich habe diesen Code nicht getestet). Hoffe das hilft. Ich konnte keine anderen jQuery-Plugins finden als das, das Sie gefunden haben, das das tut, wonach Sie suchen.

$.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); 
       } 
      } 
     } 
    } 
    } 
}); 

Lassen Sie uns sagen, dass GetCart die folgende JSON-Objekt zurückgibt:

{ 'firstname': 'Bob', 'lastname': 'Ross', 'items': [ { 'desc' : 'car', 'quantity': 1, 'price': 15000.00}, { 'desc' : 'tire', 'quantity': 4, 'price': 200.00} ] } 

auch annehmen, dass Sie haben die folgende 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>