1

これに対する答えを何日も探しましたが、私に合った答えが見つからないようです。他の場所で答えられた場合はお詫び申し上げます。

私は

viewModel = ko.mapping.fromJS(@Html.Raw(JsonConvert.SerializeObject(Model)));

の基本構造を持つ

ゾーン = ID: {} サイズ:{} 詳細:{[ 州:{} 郵便番号:{[郵便番号: {44444}, 郵便番号: {11111},{..}]}]}

function ZoneDetail() {
    var self = this;
    self.ZoneId = ko.observable();
    self.Zipcodes = ko.observableArray();

    self.addZipcode = function () {
        self.Zipcodes.push(new Zipcode());
    };

    self.deleteZipcode = function (zip) {
        self.Zipcodes.remove(zip);
    };

};

今、私の問題は、既存のデータを編集しようとすることです。

上記のコードは、新しい詳細を作成し、それらの新しい詳細に郵便番号の新しいリストを追加するときに完璧に機能します。ただし、郵便番号44444を削除したり、別の郵便番号を詳細に追加したりしたい場合、44444はエラーなしで何もしません。

<input type="button" value="Add Zipcode" data-bind="click: $data.addZipcode"  style="font-size: .9em;" />

<a href='#' data-bind="click: $parent.deleteZipcode">Delete</a>

これらはボタンの私のバインディングであり、新しいものには完全に機能しますが、入ってきた既存のデータを編集するときに何もせず、エラーも発生しません

4

2 に答える 2

1

ここには未完成の交響曲があります。.addZipcode は、どこかで入力を取り、Zipcodes の配列に追加するだけなので、非常に簡単です。削除するには、削除する郵便番号を特定する方法が必要です。次のような現在の郵便番号のドロップダウン リストを提供します。

<select data-bind="options: $root.Zipcodes, optionsText: 'value', value: $root.selectedZipcode, optionsCaption: 'Choose...'"></select><br />
<button data-bind="click: $root.deleteZipcode">Delete Selected Zipcode</button>

これが機能するには、郵便番号に次のデータ構造が必要です。

var zipcode = { value: 44444 };

現在の郵便番号の配列は意味がありません。これらはオブジェクトですが、Zipcode 自体の値はどのプロパティ名にも設定されていません。構造は次のようになっていました：

Zipcodes: [{ Zipcode: 44444 }, { Zipcode: 11111 }, {...}]

私はそれがこのようになると仮定しているので、それに応じて置き換えます：

Zipcodes: [{ value: 44444 }, { value: 11111 }, {...}]

他に行う必要があるのは、selectedZipcode プロパティを ViewModel に追加することです。

function ZoneDetail () {
    ...
    self.selectedZipcode = ko.observable();
    ...
    self.deleteZipcode = function () {
        if (self.selectedZipcode()) {
            ko.utils.arrayRemoveItem(self.Zipcodes(), selectedZipcode());
            self.selectedZipcode(null);
        }
    };
}

*注: 私は、関数呼び出しを行ったり、データ バインドでロジックを使用したりするのが好きではありません。私にとって、データ バインドの関数参照で予測できる唯一の許容可能なパラメーターは、現在のコンテキストです。これが意味することは次のとおりです。

function ViewModel() {
    var self = this;
    self.Zipcodes = ko.observableArray([{ value: 44444 }, { value: 11111 }]);
    self.deleteZipcode = function (Zipcode) {
        ko.utils.arrayRemoveItem(self.Zipcodes(), Zipcode());
    };
}

そしてビューモデル:

<div data-bind="foreach: $root.Zipcodes">
    <!-- The $data context in this div is each individual Zipcode item.  Any function references in here will be passed the current data context when called -->
    <span data-bind="text: $data.value"></span><br />
    <button data-bind="click: $root.deleteZipcode">Delete This Zipcode</button>
</div>

必要に応じてこの方法で行うことができます。相違点は、各 Zipcode オブジェクトのリストには独自の [削除] ボタンがあり、必要なボタンは 1 つだけであることです。それで、それはもっと考えるべきことです。

于 2013-09-09T22:21:25.787 に答える
0

deleteZipCode メソッドはパラメーターを期待しています:

self.deleteZipcode = function (zip)

クリック時に関数に zip を渡していません。試す

<a href='#' data-bind="click: $parent.deleteZipcode(44444)">Delete</a>

または、44444 を削除する値に置き換えます。

于 2013-09-09T21:14:18.910 に答える