Question

我想创建一个可选列表，其中每个列表元素都来自ajax请求。这很好用。但是我无法解决的问题是，更新后所选的列表元素不会保持选中状态（新的Ajax请求）。其他一切都按预期工作。谢谢你的帮助。

这是我的html的代码：

<!DOCTYPE html>
<html>
<head>    
    <title>Sample</title>
    <script src='/sm/scripts/jquery.js' type='text/javascript'></script>
    <script src='/sm/scripts/knockout.js' type='text/javascript'></script>
    <script src='/sm/scripts/knockout.mapping.js' type='text/javascript'></script>
</head>
<body> 
    <select data-bind="options:SiteData , selectedOptions:selectedSiteData , optionsText: 'SiteName'" size="5" multiple="true"></select>
    <pre data-bind="text: ko.toJSON($root.selectedSiteData, null, 2)"></pre>
    <script src='/sm/viewModel.js' type='text/javascript'></script>
</body>
</html>

这是我的viewmodel.js的代码：

function viewModel(){
    var self = this;
    this.SiteData = ko.mapping.fromJSON([{}]);
    self.selectedSiteData = ko.observableArray();
    this.refresh = function() {
      $.getJSON("/sm/allsites", function(data) {
          ko.mapping.fromJS(data, self.SiteData);
      });
    };
    self.refresh();
    setInterval(self.refresh, 3000);
};
ko.applyBindings(new viewModel());

Answer 1

问题是selectedSiteData包含对SiteData中对象的引用，突出显示由对象 - 身份比较决定。刷新SiteData后，所有对象都是全新的标识，即使其中一些对象包含与前一个对象相同的数据，因此selectedSiteData中的所有对象都不等于它们。

我认为你几乎必须遍历selectedSiteData并将每个成员的数据（可能是id字段）与SiteData的每个成员中的数据进行比较，前者与后者匹配。

选定的列表元素不会保持选中状态（通过ajax请求更新后）

1 个答案: