jQuery Datalink不使用对象方法

Question

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

我正在使用新的jquery .link（）插件（http://api.jquery.com/link/），以使用对象属性值或vice vicea，evera cons eforma e eui和vice extera extem e emally和vice。已更新。

除了形式元素之一外，所有这些都可以使用，该元素应包含对象实例方法的结果，但永远不会更新。

我在表单上放了一个按钮，以手动检查差异的值，但这可以工作，但是jQuery链接插件并未自动填充输入元素，尽管它正在填充链接到对象属性的输入元素。所有元素都有一个ID和名称属性。

谁能告诉我我要去哪里？

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

问题是差异是产品对象而非属性的方法。您不能将DOM元素链接到方法，而只能将其链接到属性。

我解决问题的方式是（a）使差异成为属性，（b）使用转换和转换方法，以确保正确更新此新属性。

这是我的脚本块：

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, 等等。对于差异属性，转换器是调用的转换类型 showDiscrepancy. 。 （在本质上 convert 从dom元素到对象属性，然后 convertBack 从属性到元素。）