Question

我正在试验淘汰赛和映射插件，并想知道为什么这不起作用。我有一个我想使用映射扩展

加载的viewmodel

function todoListViewModel(data) {
    ko.mapping.fromJSON(data, { todos: TodoItem.options }, self);
    ko.mapping.fromJSON(data, { todos: TodoItem.options }, self);
}

映射的选项如下所示：

    var TodoItem = function (options) {
        var todoItem = ko.mapping.fromJS(options.data);

        todoItem.remove = function () {
            alert('remove');
        };

        return todoItem;
    };
    TodoItem.options = {
            create: TodoItem 
    };

JSON数据如下所示：

{
    "id": "0",
    "todo": "",
    "todos": [
        {
            "todo": "Kevin",
            "isDone": true
        }
    ]
}

第一次调用映射成功，但第二次调用失败并出现stackoverflow：（“未捕获RangeError：Chrome中超出最大调用堆栈大小”）

如果我更改代码以便我不将选项传递给映射，则不会抛出异常。

我也尝试将ToDo构造函数简化为此

var TodoItem = function (options) {
    var todoItem = {};

    return todoItem;
};

但我仍然得到同样的错误。

看起来我不能这样做，但我想知道为什么？

Answer 1

问题在于这一点：

TodoItem.options = {
    create: TodoItem 
};

您正在使用属性“options”扩展TodoItem，该属性再次包含TodoItem - 因此函数TodoItem具有包含其自身的属性。

TodoItem.options.create == TodoItem
TodoItem.options.create.options.create == TodoItem
TodoItem.options.create.options.create.options.create == TodoItem
...

因为它只是一个引用，所以在JavaScript中没有问题。但是淘汰映射插件似乎在该选项对象上做了一些复制操作（或具有相同效果的东西），即它试图遍历其所有属性，从而最终进入无限循环。

您可以使用匿名函数作为包装器轻松解决此问题：

TodoItem.options = {
    create: function(options) {
        return new TodoItem(options);
    }
};

敲除映射导致stackoverflow

1 个答案: