敲除可观察到的循环 [英] Cyclical observable with knockoutjs

问题描述

我有一个视图，如以下屏幕抓图所示:

I have a view which presents as seen in the following screen grab:

在点击视图列中的项目时，将填充可用列列表.当用户从视图列表中单击其他项目时，需要重置可用列列表，并在列表中填充与新选择的 View 相关的列em>

On clicking an item from the Views column, the Available Columns list is populated. When the user then clicks a different item from the Views list, the Available Columns list needs to be reset and populated with columns relevant to the newly selected View

在剔除视图模型中，我具有以下订阅并进行了计算:

In my knockout view model I have the following subscriptions and computed:

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);

从我的代码注释中可以看出，问题在于可观察到的 selectedView 订阅.这绑定到视图的选定项 列表.当这种情况发生变化时，我需要清除 Available Columns 列表，但这会触发绑定的可观察数组的订阅，这将清除 VisibleColumns 可观察数组， selectedView订阅.

As can be seen in my code comments, the problem is with the subscription of the selectedView observable. This is bound to the selected item of the Views list. When this changes I need to clear down the Available Columns list but this then causes the subscription of the bound observable array to fire which then clears out the VisibleColumns observable array, needed by the selectedView subscription.

是否可以使用标准模式来解决敲除js的此类问题?

Is there a standard pattern to use to solve such problems with knockoutjs?

推荐答案

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

My solution was to remove the subscription on columnsToAdd observable array. Instead, I update the backing view model's VisibleColumns collections of the Views collections within the events for the Add and Remove buttons:

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())
    };

这篇关于敲除可观察到的循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！