Vergleichen von alten und neuen Preisen in einem Bootstrap-Thumbnail?

Question

Wie aus dem folgenden Code ersichtlich ist, erzeuge ich mit Hilfe der Vorlage in var sProductTemplate dynamisch Thumbnails. Die Thumbnails werden über eine Ajax-Anfrage gefüllt, die die Informationen aus einer JSON-Datei bezieht.

Meine Aufgabe ist es, den aktuellen Preis im Thumbnail mit dem aktualisierten Preis im JSON zu vergleichen (falls vorhanden) und einen grünen Pfeil im Thumbnail anzuzeigen, wenn der neue Preis höher als der alte ist. Wenn der neue Preis niedriger als der alte ist, muss ich einen roten Pfeil anzeigen.

Mein Problem ist, dass ich nicht wirklich zu diesem Punkt kommen kann, da ich nicht herausfinden kann, wie man den alten Preis speichert und dann mit dem neuen Preis für jedes Thumbnail vergleicht.

Da jede Miniatur eine eindeutige ID hat den i diesen Code geschrieben habe, den Preis von dem dom durch die Miniaturansicht des ids zu bekommen:

var sPriceInDom = Number($("#product-id-"+sProductId+" .product-price").text()); 

Aber natürlich, das gibt mir den letzten Preis und ich kann es nicht wirklich mit dem alten Preis vergleichen, da es durch den neuen Preis ersetzt wird.

Wenn ich diesen Code direkt nach der Ajax-Anfrage, dann gibt es mir nur Nullen, da das Thumbnail dynamisch generiert wird und es zuerst ausgefüllt werden muss.

Hat jemand eine Idee wie kann ich den alten Preis behalten und ihn mit dem zuletzt aktualisierten vergleichen, damit ich den Unterschied berechnen kann?

Hier ist alles neccesary Code:

var sProductTemplate = '<div class="col-sm-6 col-md-3"> \ 
           <div class="thumbnail"> \ 
           <div id="product-id-{{product-id}}" class="product"> \ 
            <img class="imgProduct" src="{{product-icon}}" alt="idiot forgot icon"> \ 
            <div class="caption"> \ 
            <h3>{{product-name}}</h3> \ 
            <div class="product-price">{{product-price}}</div> \ 
            <i {{arrow-updown}}></i> \ 
            </div> \ 
           </div> \ 
           </div>'; 
getProducts(); 
function getProducts() { 
    $.ajax({ 
      "url":'get-products.php', 
      "method":"get", 
      "dataType":"text", 
      "cache":false 
     }).done(function(jData){ 
      var jProducts=JSON.parse(jData); 

     jProducts.forEach(function(jProduct){ 
      var sProductId = jProduct.id; 
      var sProductName = jProduct.name; 
      var sProductBrand = jProduct.brand; 
      var sProductPrice = jProduct.price; 
      lastPrice = sProductPrice; 
      var sPriceInDom = Number($("#product-id-"+sProductId+" .product-price").text()); 
      console.log(sPriceInDom + " DOM"); 

      var arrowUP ='class="fa fa-arrow-up" aria-hidden="true"'; 
      var arrowDOWN ='class="fa fa-arrow-down" aria-hidden="true"'; 

       var sTempProduct = sProductTemplate; 
       sTempProduct = sTempProduct.replace("{{product-id}}", sProductId); 
       sTempProduct = sTempProduct.replace("{{product-icon}}", "http://image.flaticon.com/teams/1-freepik.jpg"); 
       sTempProduct = sTempProduct.replace("{{product-name}}", sProductBrand); 
       sTempProduct = sTempProduct.replace("{{product-price}}", sProductPrice); 

       sTempProduct = sTempProduct.replace("{{arrow-updown}}",arrowUP); 
       $("#lblDisplayProducts").append(sTempProduct); 

      }) 

     }); 
    } 

Answer 1

Dieses Problem stellt einen weiteren großen Grund, warum der DOM sollte wirklich nicht zum Speichern von Daten verwendet werden (siehe die Diskussion here). Stellen Sie sich das DOM als eine Möglichkeit vor, den aktuellen Zustand der Daten widerzuspiegeln, aber nicht als den Datenspeicher selbst.

Es ist besser, die Daten in einem Javascript-Objekt zu speichern, und dann können Sie frühere und eingehende Werte einfacher vergleichen. Das KnockoutJS Framework ist ein wunderbares Beispiel zum lokalen Speichern von Objekten mit dynamischer Datenbindung von den Javascript-Daten zum DOM. AngularJS bietet ähnliche Trennung von Bedenken.

Insgesamt ist es besser, dem MVC-Muster zu entsprechen, bei dem das Datenmodell nicht als Teil des DOM "gespeichert" wird.