Question

我已经搜索了几天的答案，但似乎无法找到适合我的答案，所以如果在其他地方得到解答我会道歉。

我有一个

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

基本结构

区域= ID：{}大小：{}详细信息：{[状态：{} Zipcodes：{[邮编：{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);
    };

};

现在我的问题在于尝试编辑预先存在的数据。

上述代码在制作新细节和向新细节添加新的zipcodes列表时非常有用。但是，如果我想删除邮政编码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>

这些是我对按钮的绑定，它们可以很好地处理新内容，但在编辑现有数据时不做任何操作并且没有错误

Answer 1

你在这里有一首未完成的交响曲。 .addZipcode非常简单，因为您只是在某处输入并将其添加到Zipcodes数组中。要删除，您需要一种方法来识别要删除的Zipcode。我会提供当前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>

为此，您的Zipcodes必须具有以下数据结构：

var zipcode = { value: 44444 };

您当前的Zipcodes数组对我没有意义。它们是对象，但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());
    };
}

ViewModel：

<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对象列表都有自己的删除按钮，也许你只需要一个按钮。所以这更值得思考。

Answer 2

deleteZipCode方法需要一个参数：

self.deleteZipcode = function (zip)

您没有在点击时将zip传递给该功能。试试

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

或用您要删除的值替换44444。

编辑现有的viewmodel数据

2 个答案: