带有knockoutjs的周期性可观察答案

【问题标题】：Cyclical observable with knockoutjs带有knockoutjs的周期性可观察
【发布时间】：2016-06-14 08:54:26
【问题描述】：

我有一个视图，如以下屏幕截图所示：

单击 Views 列中的项目时，会填充 Available Columns 列表。当用户随后单击 Views 列表中的不同项目时，Available Columns 列表需要重置并填充与新选择的 View 相关的列em>

在我的淘汰视图模型中，我有以下订阅和计算：

self.columnsToAdd.subscribe(function (items) {
    var viewIndex = findViewIndex(self.selectedView().ViewId);
    //delete columns from the selected view then add in those that are in the 
    //columnsToAdd list
    data.Users[0].Views[viewIndex].VisibleColumns.length = 0;
    for (i = 0; i < items.length; i++) {
        data.Users[0].Views[viewIndex].VisibleColumns.push(view = {ColumnId:items[i].ColumnId, Heading:items[i].Heading});
    }
});

self.selectedView.subscribe(function (item) {
    //clear columnsToAdd then re-populate
    //this line is causing data.Users[0].Views[0].VisibleColumns to be reset
    //because it triggers the columnsToAdd.Subscribe
    self.columnsToAdd([]); 
    var view = getById(self.views, item.ViewId);
    for (i = 0; i < view.VisibleColumns.length; i++) {
        self.columnsToAdd.push(view.VisibleColumns[i]);
    }
});

self.allColumns = ko.computed(function () {
    var view = getById(self.views, self.selectedView().ViewId);
    return view ? ko.utils.arrayMap(view.AllColumns, function (item) {
        return {
            ColumnId: item.Id,
            Heading: item.Heading
        };
    }) : [];
}, this);

从我的代码 cmets 中可以看出，问题在于订阅了 selectedView observable。这绑定到 Views 的选定项列表。当此更改时，我需要清除 Available Columns 列表，但这会导致绑定可观察数组的订阅触发，然后清除 VisibleColumns 可观察数组，需要selectedView 订阅。

是否有标准模式可用于解决敲除js 的此类问题？

【问题讨论】：

我会在每个视图视图模型上有两个集合——AvailableColumns 和 ToDisplay。然后我会有 SelectedAvailableColumn 和 SelectedToDisplay observables。我会将每个列表绑定到每个集合，并将选择绑定到每个 observable。现在，当您单击按钮时，您选择 SelectedAvailableColumn，将其从 AvailableColumns 中删除，然后将其添加到 SelectedToDisplay。这就是您需要做的所有事情，只要实例相同，一切都应该很容易连接。
谢谢你，你让我意识到我把它复杂化了。

标签： javascript mvvm knockout.js

【解决方案1】：

我的解决方案是删除 columnsToAdd 可观察数组上的订阅。相反，我在 Add 和 Remove 的事件中更新了支持视图模型的 VisibleColumns 集合的 Views 集合按钮：

self.addColumn = function () {
        if (self.columnsToAdd().indexOf(self.selectedAvailableColumn()) < 0) {
            self.columnsToAdd.push(self.selectedAvailableColumn());
            data.Users[0].Views[self.viewIndex].VisibleColumns.push(self.selectedAvailableColumn())
        }
    };

    self.removeColumn = function () {
        self.columnsToAdd.remove(self.selectedColumnToRemove());
        data.Users[0].Views[self.viewIndex].VisibleColumns.pop(self.selectedAvailableColumn())
    };

【讨论】：