2

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

新しい Jquery .link() プラグイン (http://api.jquery.com/link/) を使用して、フォームまたはオブジェクトのいずれかが更新されます。

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

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

問題は、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
        }
   });
});

それを通過する：

  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 に答える