jQuery Datalink ne fonctionne pas avec les méthodes d'objet

Question

J'ai un objet javascript avec plusieurs propriétés. L'objet contient également une méthode d'instance qui renvoie le résultat d'un calcul sur deux des propriétés de l'objet.

J'utilise la nouvelle Jquery .link () plugin (http://api.jquery.com/link/), pour mettre à jour les éléments de l'interface utilisateur et forment avec les valeurs des propriétés de l'objet et vice versa, chaque fois que soit la forme ou l'objet est mis à jour.

Ceci est tout travail, sauf pour l'un des éléments de formulaire, qui doit contenir le résultat de la méthode d'instance de l'objet, mais n'est mise à jour.

J'ai mis un bouton sur le formulaire pour vérifier manuellement la valeur de Divergence, et cela fonctionne, mais le plugin lien jquery n'est pas peuplant les éléments d'entrée automatiquement, bien qu'il soit peuplant les éléments d'entrée liés aux propriétés de l'objet. Tous les éléments ont un attributs id et name.

Quelqu'un peut-il me dire où je vais mal?

Mon 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

Le problème est que Divergence est une méthode d'un objet produit et non une propriété. Vous ne pouvez pas lier un élément DOM à une méthode, pour une propriété.

La façon dont je résolu le problème consiste à (a) faire Divergence une propriété, et (b) utiliser les méthodes de convertir et ConvertBack afin d'assurer que cette nouvelle propriété a été correctement mis à jour.

Voici mon bloc de 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
        }
   });
});

En passant par elle:

1. ajouter la propriété Discrepancy à la classe Product, avec défaut 0. Jeter les choses de ComputeDiscrepancy.

2. écrire quelques fonctions qui prennent note des changements dans InStock et Ordered. Ceux-ci mettront à jour les propriétés pertinentes de l'objet cible, puis appeler une fonction appelée calcDiscrepancy et retourner sa valeur de retour.

3. calcDiscrepancy mettra à jour la valeur à la propriété Discrepancy de l'objet cible. Pour faire en sorte que tous les événements sont déclenchés avec ce changement, je la méthode de .data() jQuery.

4. écrire une méthode de showDiscrepancy qui mettre à jour le contenu de la cible avec la valeur transmise (la cible va être l'élément DOM). J'ai aussi changé les éléments de « divergence » à plutôt que des zones de texte. Il n'a pas de sens contraire

5. Les appels à link() carte maintenant les éléments DOM pertinents aux propriétés pertinentes et spécifier des convertisseurs pour chacun. Pour la propriété inStock le convertisseur est un type de conversion et appelle changeInStock, etc. Pour la propriété Divergence, le convertisseur est un type ConvertBack que les appels showDiscrepancy. (En substance convert va de l'élément de DOM à la propriété d'objet, et convertBack va de la propriété de l'élément.)