0

Knockout.js を使用して、未払いの請求書の利子を計算するための (やや複雑な) フォームを作成し、部分的な支払い、費用、および契約上の違約金を念頭に置いています。

私はJSよりもPHPの方が経験が豊富なので、計算はPHPで処理されます。Knockout は、新しいフォーム フィールドを追加するダイナミクスを処理し、最も複雑な状況でもフォームを柔軟に使用できるようにします。

データを正しく抽出できるようにするために、PHP への投稿を介して 3 つの多次元配列を提供します。

  • 請求書[$i][名前] / 請求書[$i][金額] / 請求書[$i][日付] / ...
  • お支払い[$j][名前] / ...
  • コスト[$k][名前] / ...

私がJSで解決できないように見える問題は、新しいフォーム要素がKnockout.jsによって生成され、一意の番号が割り当て可能であることです(私は推測します)

data-bind="attr:{name: someFunctionToGiveUniqueName}"

uniqueName バインディングを調べましたが、3 つの uniqueName が必要であり、結果の名前をカスタマイズしてデータの構造を維持できるはずです。

これは私のviewModelです（そして、それほどユニークではない入力フィールドの命名を除いて、それは機能します）：

        <script type="text/javascript">

        // Overall viewmodel
        function ViewModel() {
            var self = this;

            // Data
            self.Hoofdsom   = ko.observableArray();
            self.Betaling   = ko.observableArray();
            self.Kost       = ko.observableArray();

            self.hsBeschr   = ko.observable();
            self.hsBedrag   = ko.observable();
            self.hsVerval   = ko.observable();

            self.hsIntr     = ko.observable();
            self.hsIntrType = ko.observable();

            self.hsSchadeType = ko.observable();
            self.hsSchadePerc = ko.observable(10);
            self.hsSchadeMin = ko.observable(0);
            self.hsSchadeMax = ko.observable(1500);

            // Initial State
            self.Hoofdsom.push("new");

            // Operations
            self.addHoofdsom = function() {
                self.Hoofdsom.push(self.Hoofdsom().length);
            }
            self.remHoofdsom = function(hfd){
                self.Hoofdsom.remove(hfd);
            }
            self.addBetaling = function() {
                self.Betaling.push(self.Betaling().length);
            }
            self.remBetaling = function(bet){
                self.Betaling.remove(bet);
            }
            self.addKost = function() {
                self.Kost.push(self.Kost().length);
            }
            self.remKost = function(kos){
                self.Kost.remove(kos);
            }
        }

        // Apply bindings
        ko.applyBindings(new ViewModel());

    </script>
4

1 に答える 1

0

私があなたを正しく理解しているかどうかはわかりませんが、ここで定義されている場合の「uniqueName」バインディングを見て、これに似た独自のバインディングを作成してください-それほど難しくないはずです-ドキュメントを参照してください。

他の一意の値はタイムスタンプです - 私があなたのために作ったこの jsfiddle - uniqName関数を見てください。

幸運を ：）

于 2012-05-07T19:13:18.550 に答える