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

Question

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

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

特别是，id 为“tabsDiv1”、“tabsDiv2”等的项目会丢失其 id。

提前感谢您的帮助，我很困惑!

完整的 git 存储库以及示例 github 页面站点: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 设置它。当 Knockout 渲染页面时，它将使用 dom 元素的当前状态作为选项卡的模板。在本例中，您的元素的 ID 为空。我看到你显然曾经在某个时刻设置了 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();
    };
    ...

这可能不是唯一的问题，但这是一个开始。你混淆了很多 knockout 和手动 dom 操作和 jquery。您确实应该尝试限制混合以使其易于管理。对于其他看过这篇文章的人来说，这将是一本艰难的读物。