jQuery的数据链接不与对象方法

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

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

我解决了这个问题的方法是（a）作出差异的属性，以及（b）使用转换和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属性，转换器是转换类型，并且调用changeInStock等。对于差异属性，转换器是一个convertBack类型，它调用showDiscrepancy。 （本质上convert去从DOM元素的对象属性，并convertBack从属性的元素去。）