jQuery Datalink non funziona con metodi di oggetto

Question

Ho un oggetto JavaScript con diverse proprietà. L'oggetto contiene inoltre un metodo di istanza che restituisce il risultato di un calcolo su due delle proprietà dell'oggetto.

Sto utilizzando il nuovo Jquery .link () plug (http://api.jquery.com/link/), per aggiornare gli elementi dell'interfaccia utente e formano con i valori di proprietà di oggetto e viceversa, ogni volta che sia la forma o l'oggetto viene aggiornato.

Questo è tutto lavoro ad eccezione di uno degli elementi del modulo, che dovrebbe contenere il risultato del metodo di istanza dell'oggetto, ma non viene mai aggiornato.

Ho messo un pulsante sul modulo per controllare manualmente il valore di discrepanza, e questo funziona, ma il collegamento plug-in jQuery non è popolando automaticamente gli elementi di input, anche se è popolare l'elementi di input legati alle proprietà dell'oggetto. Tutti gli elementi hanno un ID e il nome gli attributi.

qualcuno può dirmi dove sto andando male?

Il mio 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

Il problema è che di discrepanza è un metodo di un oggetto prodotto e non una proprietà. Non è possibile collegare un elemento DOM a un metodo, solo per una proprietà.

Il modo in cui ho risolto il problema è quello di (a) fare Discrepanza una proprietà, e (b) utilizzare i metodi di convertire e convertBack al fine di garantire che questa nuova proprietà è stato aggiornato correttamente.

Ecco il mio blocco di script:

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

Andando attraverso di essa:

1. aggiungere la proprietà Discrepancy alla classe Product, con valore predefinito 0. buttare via la roba ComputeDiscrepancy.

2. scrivere un paio di funzioni che prendono atto dei cambiamenti nella InStock e Ordered. Questi aggiornare le proprietà rilevanti dell'oggetto bersaglio e quindi chiamare una funzione denominata calcDiscrepancy e restituisce il suo valore di ritorno.

3. calcDiscrepancy aggiornerà il valore alla proprietà Discrepancy dell'oggetto target. Per garantire che tutti gli eventi vengono attivati ??con questo cambiamento, ho usato il metodo .data() di jQuery.

4. scrivere un metodo showDiscrepancy che aggiornare i contenuti del target con il valore passato (il bersaglio sta per essere l'elemento DOM). Ho cambiato anche gli elementi "discrepanza" per piuttosto che le caselle di testo:. Non ha senso altrimenti

5. Le chiamate verso link() ora Mappa degli elementi DOM relativi alle proprietà rilevanti e specificano convertitori per ciascuna. Per la proprietà InStock il convertitore è un tipo convertito e chiama changeInStock, ecc Per la proprietà di discrepanza, il convertitore è un tipo convertBack che le chiamate showDiscrepancy. (In sostanza convert va dall'elemento DOM alla proprietà dell'oggetto, e convertBack va dalla proprietà all'elemento.)