jQuery DataLinkオブジェクトメソッドを使用していない

Question

いくつかのプロパティを備えたJavaScriptオブジェクトがあります。オブジェクトには、2つのオブジェクトのプロパティで計算の結果を返すインスタンスメソッドも含まれています。

新しいjquery .link（）プラグイン（http://api.jquery.com/link/）を使用して、フォームまたはオブジェクトのいずれかで、オブジェクトプロパティ値を使用してUIおよびフォーム要素を更新し、その逆更新されます。

これはすべて、フォーム要素の1つを除いて機能します。これには、オブジェクトのインスタンスメソッドの結果が含まれている必要がありますが、更新されることはありません。

フォームにボタンを置いて不一致の値を手動でチェックしますが、これは機能しますが、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 クラス、デフォルト。計算型のようなものを捨てます。

2. の変更に注意する機能をいくつか書く InStock と Ordered. 。これらは、ターゲットオブジェクトの関連プロパティを更新し、呼び出す関数を呼び出します calcDiscrepancy 返品値を返します。

3. calcDiscrepancy 値をターゲットオブジェクトに更新します Discrepancy 財産。この変更ですべてのイベントがトリガーされるようにするために、私はjqueryの使用を使用しました .data() 方法。

4. 書く showDiscrepancy ターゲットの内容を渡された値でターゲットの内容を更新する方法（ターゲットはDOM要素になります）。また、テキストボックスではなく、「矛盾」要素を変更しました。それ以外の場合は意味がありませんでした。

5. 通話 link() 次に、関連するDOM要素を関連するプロパティにマップし、それぞれのコンバーターを指定します。 Instockプロパティの場合、コンバーターはコンバートタイプと呼び出しです changeInStock, 、等しいプロパティの場合、コンバーターは呼び出す変換バックタイプです showDiscrepancy. 。 （本質的に convert DOM要素からオブジェクトプロパティに移動し、 convertBack プロパティから要素に移動します。）