Question

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

我正在使用新的Jquery .link（）插件（http://api.jquery.com/link/）来更新UI和表单元素与对象属性值，反之亦然，无论何时表单或者对象被更新。

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

我在表单上放了一个按钮来手动检查Discrepancy的值，这可以工作，但是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方法以确保正确更新此新属性。

这是我的脚本块：

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

完成它：

将Discrepancy属性添加到Product类，默认为0.丢弃ComputeDiscrepancy东西。
编写一些注意InStock和Ordered更改的函数。这些将更新目标对象的相关属性，然后调用名为calcDiscrepancy的函数并返回其返回值。
calcDiscrepancy会将值更新为目标对象的Discrepancy属性。为确保通过此更改触发所有事件，我使用了jQuery的.data()方法。
编写一个showDiscrepancy方法，该方法将使用传入的值更新目标的内容（目标将成为DOM元素）。我还将“差异”元素改为文本框而不是文本框：否则没有意义。
对link()的调用现在将相关的DOM元素映射到相关属性，并为每个属性指定转换器。对于InStock属性，转换器是转换类型并调用changeInStock等。对于Discrepancy属性，转换器是一个调用showDiscrepancy的convertBack类型。（本质上convert从DOM元素到对象属性，convertBack从属性到元素。）

jQuery Datalink不使用对象方法

1 个答案: