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從屬性的元素去。）