2

我有一个具有多个属性的 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>
4

1 回答 1

1

问题是差异是产品对象的一种方法，而不是属性。您不能将 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
        }
   });
});

通过它：

  1. 将Discrepancy属性添加到Product类，默认为 0。扔掉 ComputeDiscrepancy 的东西。

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

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

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

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

于 2011-01-13T22:14:32.367 回答