Question

我正在更新Knockout中的Knockout对象，并通过控制台验证它是否正确更新。但下降值并没有得到新值的刷新。如果我手动刷新页面，下拉列表将会更新。我想我需要做一些可观察的事情，但并不完全确定。

这是我的KO viewmodel：

var SellerViewModel = function(groups) {
        var self = this;

        self.json = groups;
        self.groups = ko.computed(function() {
            var opts = [];
            for(var key in self.json)
            {
                if(self.json.hasOwnProperty(key))
                {
                    opts.push({Text: self.json[key].majorGroup + " / " + self.json[key].minorGroup, Value: self.json[key].groupId});
                }
            }
            return opts;
        });

        self.addGroup = function(json) {
            var group = JSON.parse(json);
            self.json.push(
                {
                    "ExtensionData":{},
                    "contractId":"10006",
                    "groupId":group.groupID,
                    "imageId":null,
                    "majorGroup":group.majorGroup,
                    "minorGroup":group.minorGroup
                }
            );
            console.log(JSON.stringify(self.json));
        };

我的HTML下拉列表：

<select data-bind="value: roomID, options: $root.groups, optionsValue: 'Value', optionsText: 'Text', optionsCaption: ' -- select a room --', disable: disableRoom" class="form-control" id="@roomID"></select>

最后，这就是下载在页面加载中的填充方式：

var groups = @Html.Raw( Json.Encode(ViewBag.GroupDetail.SellerGroup) );
sellerViewModel = new SellerViewModel(groups);

忘记添加最后一个片段。这就是我如何在knockout对象中添加一个额外的项目，该对象应该更新下拉列表。

var json = '{"majorGroup" : "' + major + '", "minorGroup" : "' + minor + '", "groupID" : "' + groupID + '" }';
sellerViewModel.addGroup(json);

我的猜测是self.groups需要是一个可观察的数组。但我不知道该怎么做，因为我把它设置为等于ko.computed已经。

Answer 1

这是一个简单的问题，解决方案更简单。

self.json = ko.observableArray(groups);

为了让你的computed解雇，它需要注册＆＃34;订阅＆＃34;。现在，你把它与一个普通的JavaScript变量联系在一起（看起来push()我猜测它是一个数组）。

使self.json可观察数组将为您创建此订阅。

Answer 2

正如@pimbrouwers已经提到的那样，如果您希望在数组更改时更新UI，则需要将json设为observableArray。

self.json = ko.observableArray(groups);

您可以对代码进行一些改进。您可以使用map而不是循环遍历self.json的索引并检查hasOwnProperty：

self.groups = ko.computed(function() {
    // if "json" is not an observableArray, then "self.json.map"
    return self.json().map(function(group) {
      return {
        Text: group.majorGroup + " / " + group.minorGroup,
        Value: group.groupId
      }
    })
});

你正在以字符串格式连接并形成一个json，然后将其解析回来。相反，您可以自己发送一个对象。

var group = {
  majorGroup: major,
  minorGroup: minor,
  groupID: groupID 
}

sellerViewModel.addGroup(group);

从JSON.parse()删除self.addGroup。

Here's a fiddle for testing with all these changes

您还可以浏览this answer以了解有关json和javascript对象字面值之间差异的更多信息

下拉列表未从Knockout数组更新

2 个答案: