knockout.js - KnockoutJS - bindingContext の現在のアイテムを安全に削除する

Question

私はこのモデル構造を持っています

function Qux()
{
    ...
}

function Bar()
{
    var self = this;

    self.quxes = ko.observableArray([]);
    mappedQuxes = ko.utils.arrayMap(data.quxes, function (item)
    {
        return new Qux(item, root);
    });
    self.quxes(mappedQuxes);

    self.deleteQux = function (qux)
    {
        self.quxes.valueWillMutate();
        self.quxes.remove(function (item)
        {
            return item.quxId() == qux.quxId();
        });
        self.quxes.valueHasMutated();
    };          

    ...
}

function FooViewModel()
{
    var self = this;

    self.bars = ko.observableArray([]);

    $.getJSON('data/app.json', function (data)
    {
        var mappedBars = [];
            mappedBars = ko.utils.arrayMap(data.bars, function (item)
            {
                return new Bar(item, self);
            });
            self.bars(mappedBars);
    });
}

私は jQuery Mobile を使用しているため、ここで参照するすべての「ページ」は、リンクと ID を使用してナビゲートできる 1 つの HTML ドキュメント内の単なるセクションです。

オブジェクトの「編集ページ」にいQuxます。このページには「保存」と「削除」機能があります。

<!-- ko foreach: bars -->
    <!-- ko foreach: quxes -->  
        <form>
            ...
            <a href="#quxes" data-transition="fade" class=" btn-red" data-bind="click: commitForm }">
                <button type="submit">Submit</button>
            </a>
            <a href="#quxes" data-transition="fade" class=" btn-red" data-bind="click: function() { $parent.deleteQux($data); return true; }">
                <button type="submit">Delete</button>
            </a>
        </form>
    <!-- /ko -->
<!-- /ko -->

提出を無視します。私が注目したいのは削除です。それをクリックすると、突然空白のページが表示されます。

私の最善の推測は、「編集」セクションでは、そこにあるすべてのデータがその特定の「Qux」オブジェクトにバインドされているということです。self.quxesバーの配列から削除しようとすると、そのデータが削除されます。そうすることで、KO はバインドされたすべてのデータも削除したため、空白のページが表示されました。

私の推測は正しいですか？

1 つの解決策は、「削除」ボタンを「編集」ページからQux一覧ページに移動することです。残念ながら、一部の仕様要件により、それは不可能です。

私の推測が正しい場合、どうすればこの問題を回避できますか?