0

我有这个模型结构

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，所以我在这里引用的所有“页面”只是一个 HTML 文档中的部分，我可以使用链接和 ID 导航到这些部分。

我在一个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”对象。当我试图从 Bar 的self.quxes数组中删除它时，该数据被删除。通过这样做，KO 还删除了所有绑定到它的数据，因此向我显示了一个空白页。

我的猜测正确吗？

一种解决方案是将“删除”按钮从“编辑”页面移动到Qux列表页面。不幸的是，由于某些规范要求，这是不可能的。

如果我的猜测是真的，那么我该如何规避这个问题呢？

4

0 回答 0