javascript - jQuery Datalink 不使用对象方法

Question

我有一个具有多个属性的 javascript 对象。该对象还包含一个实例方法，该方法返回对该对象的两个属性的计算结果。

我正在使用新的 Jquery .link() 插件 (http://api.jquery.com/link/)，用对象属性值更新 UI 和表单元素，反之亦然，只要表单或对象已更新。

除了其中一个表单元素外，这一切都有效，它应该包含对象实例方法的结果，但永远不会更新。

我在表单上放了一个按钮来手动检查差异的值，这很有效，但是 jquery 链接插件不会自动填充输入元素，尽管它会填充链接到对象属性的输入元素。所有元素都有一个 id 和 name 属性。

谁能告诉我哪里出错了？

我的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

问题在于 Discrepancy 是 Product 对象的一种方法，而不是属性。您不能将 DOM 元素链接到方法，只能链接到属性。

我解决这个问题的方法是 (a) 使 Discrepancy 成为一个属性，并且 (b) 使用 convert 和 convertBack 方法来确保正确更新这个新属性。

这是我的脚本 block :

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

通过它:

1. 将 Discrepancy 属性添加到 Product 类，默认值为 0。丢弃 ComputeDiscrepancy 内容。

2. 编写几个函数来记录 InStock 和 Ordered 中的变化。这些将更新目标对象的相关属性，然后调用名为 calcDiscrepancy 的函数并返回其返回值。

3. calcDiscrepancy 会将值更新为目标对象的 Discrepancy 属性。为确保此更改触发所有事件，我使用了 jQuery 的 .data() 方法。

4. 编写一个 showDiscrepancy 方法，用传入的值更新目标的内容(目标将成为 DOM 元素)。我还将“差异”元素更改为而不是文本框:否则没有任何意义。

5. 对 link() 的调用现在将相关的 DOM 元素映射到相关的属性，并为每个元素指定转换器。对于 InStock 属性，转换器是一个转换类型并调用 changeInStock 等。对于 Discrepancy 属性，转换器是一个调用 showDiscrepancy 的 convertBack 类型。 (本质上，convert 从 DOM 元素到对象属性，而 convertBack 从属性到元素。)