Question

使用knockout.js，我有一个项目列表，我使用ko.utils.arrayFilter搜索过滤。

过滤部分工作正常，但是当我删除搜索词并且列表重新填充为完整列表时，一些DOM元素会丢失其ID。我怎么能让他们不丢失他们的身份？我错过了什么？

特别是，id为＆＃34; tabsDiv1＆＃34;，＆＃34; tabsDiv2＆＃34;等的项目会丢失其ID。

在此先感谢您的帮助，我很难过！

完整的git repo，带有示例github pages site：https://github.com/andrewcockerham/UdacityFENDP5NeighborhoodMap

var ViewModel = function() {
var self = this;
this.placeList = ko.observableArray([]);
this.filter = ko.observable("");

this.filteredItems = ko.computed(function() {
    var filter = self.filter().toLowerCase();
    if (!filter) {
        return this.placeList();
    } else {
        return ko.utils.arrayFilter(self.placeList(), function(item) {
            return item.name().toLowerCase().indexOf(filter) !== -1;
        });
    }
}, this);

Answer 1

问题是您在加载时手动设置标签的ID，而不是让淘汰赛设置它。当knockout呈现页面时，它将使用dom元素的当前状态作为选项卡的模板。在这种情况下，您的元素具有空白ID。我看到你显然已经淘汰了一个点，但你评论了它。如果你确实需要，你应该回去使用knockout添加id。

<div class="tabsDiv col-md-12 col-sm-12" id=""
    style="display: none; padding-left: 0px; padding-right: 0px;
           border-style: solid;border-width:1px;"
>
<!-- data-bind="attr: { id: 'tabsDiv' + $index() }" -->
...

<script>
window.onload = function() {
    // get all tabDiv elements and add id with index to each one
    var tabsDivArray = document.getElementsByClassName("tabsDiv");
    for (var i = 0; i < tabsDivArray.length; i++) {
        var tabsDiv = tabsDivArray[i];
        tabsDiv.id = 'tabsDiv' + i.toString();
    };
    ...

这可能不是唯一的问题，但它是一个开始。你混合了大量的淘汰赛和手动dom操控和jquery。你真的应该尝试限制混合，以保持可管理性。对于那些来看这个的人来说，这将是一个艰难的读物。

使用Knockout.js数组过滤器删除元素的id

1 个答案: