jQuery Datalink arbeitet nicht mit Objektmethoden

Question

habe ich ein Javascript-Objekt mit mehreren Eigenschaften. Das Objekt enthält auch eine Instanzmethode, dass die Renditen das Ergebnis einer Berechnung auf zwei Eigenschaften des Objekts.

Ich bin mit dem neuen JQuery .link () Plugin (http://api.jquery.com/link/), die Benutzeroberfläche und Formularelemente mit den Objekteigenschaftswerten und umgekehrt zu aktualisieren, wann immer entweder das Formular oder das Objekt wird aktualisiert.

Das ist alles Arbeits mit Ausnahme eines der Formelemente, die das Ergebnis der Objektinstanzmethode enthalten sollte, aber nie aktualisiert wird.

Ich habe eine Schaltfläche auf dem Formular setzte den Wert manuell von Diskrepanzanalyse zu überprüfen, und das funktioniert, aber das Jquery Link Plugin ist bevölkert nicht die Eingabeelemente automatisch, obwohl sie die Eingangselemente zu den Objekteigenschaften verknüpft sind, bevölkern. Alle Elemente haben eine ID und Name Attribute.

Kann mir jemand sagen, wo ich falsch gehe?

Meine javascript:

<script>

   function Product() {
       this.InStock = 0;
       this.Ordered = 0;

   }

   // object's instance method
   Product.prototype.Discrepancy = ComputeDiscrepancy;

   function ComputeDiscrepancy() {
       return this.InStock - this.Ordered;
   }

   $(document).ready(function () {

       var products = new Array();

       products[0] = new Product();
       products[1] = new Product();

       $("form").link(products[0], {
           InStock: "product0_InStock",
           Ordered: "product0_Ordered",
           Discrepancy: "product0_Discrepancy"
       });

       $("form").link(products[1], {
           InStock: "product1_InStock",
           Ordered: "product1_Ordered",
           Discrepancy: "product1_Discrepancy"
       });
       // button for me to manually check discrepancy method works
       $("#checkData").click(function () {
           alert(products[0].InStock);
           $("#product0_Discrepancy").val(products[0].Discrepancy());
       });

   });   </script>

HTML:

<table>
    <tr>
        <th></th><th>Product 1</th><th>Product 2</th>
    </tr>
    <tr>
        <td> In Stock</td>
        <td><input id="product0_InStock" name="product0_InStock"/></td>
        <td><input id="product1_InStock" name="product1_InStock"/></td>

    </tr>

    <tr>
        <td>Ordered</td>
        <td><input id="product0_Ordered" name="product0_Ordered"/></td>
        <td><input id="product1_Ordered" name="product1_Ordered"/></td>
    </tr>

    <tr>
        <td>Discrepancy</td>
        <td><input id="product0_Discrepancy" name="product0_Discrepancy"/></td>
        <td><input id="product1_Discrepancy" name="product1_Discrepancy"/></td>
    </tr>

</table>

Answer 1

Das Problem ist, dass Diskrepanzanalyse ein Verfahren zur Herstellung eines Produkts Objekt ist und nicht eine Eigenschaft. Sie können nicht verknüpfen ein DOM-Element auf ein Verfahren, nur auf eine Eigenschaft.

So wie ich das Problem gelöst ist, um (a) Diskrepanzauswertung eine Eigenschaft zu machen, und (b) verwenden, um die Konvertiten und ConvertBack Methoden, um sicherzustellen, dass diese neue Eigenschaft wurde korrekt aktualisiert.

Hier ist mein Skriptblock:

function Product() {
    this.InStock = 0;
    this.Ordered = 0;
    this.Discrepancy = 0;
}

var products = [];

$(document).ready(function () {

    products[0] = new Product();
    products[1] = new Product();

    var calcDiscrepancy = function(value, source, target) {
        $(target).data("Discrepancy", target.InStock - target.Ordered);
        return value;
    };

    var changeInStock = function (value, source, target) {
        target.InStock = value;
        return calcDiscrepancy(value, source, target)            ;
    };

    var changeOrdered = function (value, source, target) {
        target.Ordered = value;
        return calcDiscrepancy(value, source, target)            ;
    };

    var showDiscrepancy = function(value, source, target) {
        $(target).text(value.toString());
    };

    $("form").link(products[0], {
        InStock: {
            name: "product0_InStock",
            convert: changeInStock
        }, 
        Ordered: {
            name: "product0_Ordered",
            convert: changeOrdered
        },
        Discrepancy: {
            name: "product0_Discrepancy",
            convertBack: showDiscrepancy
        }
    });

    $("form").link(products[1], {
        InStock: {
            name: "product1_InStock",
            convert: changeInStock
        }, 
        Ordered: {
            name: "product1_Ordered",
            convert: changeOrdered
        },
        Discrepancy: {
            name: "product1_Discrepancy",
            convertBack: showDiscrepancy
        }
   });
});

Wenn man durch sie:

1. fügen Sie die Discrepancy Eigenschaft auf die Product Klasse mit Standardwert 0. wegzuwerfen das ComputeDiscrepancy Zeug.

2. ein paar Funktionen schreiben, die Kenntnis von Änderungen in InStock und Ordered nehmen. Diese werden die relevanten Eigenschaften des Zielobjekts aktualisieren und dann eine Funktion namens calcDiscrepancy aufrufen und den Rückgabewert zurück.

3. calcDiscrepancy den Wert auf das Zielobjekt der Discrepancy Eigenschaft aktualisieren. Um sicherzustellen, dass alle Ereignisse mit dieser Änderung ausgelöst werden, habe ich jQuery .data() Methode.

4. Wie bitte showDiscrepancy Methode, die das Ziel der Inhalt mit dem Wert übergeben würde aktualisieren (das Ziel wird das DOM-Element sein). Ich habe auch die „Diskrepanz“ Elemente anstatt Textfelder geändert:. Es nicht anders Sinn ergab

5. Die Aufrufe von link() Karte nun die entsprechenden DOM-Elemente zu den relevanten Eigenschaften und Wandler für jeden angeben. Für die InStock Eigenschaft der Wandler ein Konvertit Typ ist, und fordert changeInStock, etc. Für die Diskrepanzanalyse Eigenschaft ist der Wandler ein ConvertBack Art, dass Anrufe showDiscrepancy. (Im Wesentlichen convert geht aus dem DOM-Elemente zu der Objekt-Eigenschaft und convertBack geht von der Unterkunft zum Elemente.)