使用映射插件未正确映射新行

时间:2012-05-30 15:09:06

标签: knockout.js

我使用映射插件和我自己的原型类型

来自JSON

var mapping = {
    Children: {
        create: function(options) {
            return ko.mapping.fromJS(options.data, {}, new ChildViewModel());
        }
    }
};

$.getJSON(url, null, function (data) {
    var model = ko.mapping.fromJS(data, mapping, new RootViewModel());
    ko.applyBindings(model);
});

致JSON

var data = ko.mapping.toJSON(this);

json数据包含orignal子项,新添加的项只是空的json对象{}

我从根模型

添加这样的子项
addChild: function () {
    this.Children.push(new ChildViewModel());
}

怎么了?

更新 一个重现我的问题的小提琴

http://jsfiddle.net/pDnnM/

UPDATE2 在一些谷歌的调查结果仍然没有骰子之后测试了另一种方法:/

http://jsfiddle.net/5UDhB/

回答后更新

我在主模型和子模型上都有数据需要映射,然后加密到JSON

http://jsfiddle.net/699YH/

所以我需要它来映射主要模型和孩子,也许这是不可能的?

如何更新CRUD操作? 我已经在Stackoverflow上得到了google和Madcapnmckay的进一步感谢。我有一个最后的问题,在此之后,我认为我可以使用我们目前正在使用我们的手动映射器执行的映射插件(我们很快就会超过100个视图模型,因此手动映射器开始让我们感到沮丧)。

我还没有找到一种方法让映射器处理CRUD场景,假设你在加载视图时有5个项目,这些有id,然后你添加2个项目,这些得到id:0。然后我们保存发送整个VM后端这些新行获得新的Id。我在更新时调用了mapper插件,但它在When calling ko.update*, the key '0' was not unique!

时失败了

http://jsfiddle.net/3bWcF/2/

你可以当场做

this.items.remove(function(item) { return item.id() == 0;});

在调用映射器之前,映射器可以为你做吗?谢谢!

1 个答案:

答案 0 :(得分:1)

问题是映射插件不会创建动态添加的子节点。您可以通过移动对象内部的映射来解决此问题并清理代码。

http://jsfiddle.net/madcapnmckay/3bWcF/1/

var mappings = {
    items: {
        key: function(data) {
            return data.id;
        },
        create: function(options) {
            return new ChildViewModel(options.data)
        }
    }
};    

var counter = 5;

ViewModel = function(config) {
    ko.mapping.fromJS(config, mappings, this);   

    this.json = ko.computed(function() {
        return ko.mapping.toJSON(this, { ignore: [ "json" ] });
    }, this);
};

ViewModel.prototype = {
    add: function() {
        this.items.push(new ChildViewModel({ 
            id: counter++, 
            name: "new row" + counter 
        }));
    }
};

ChildViewModel = function(config) {
    ko.mapping.fromJS(config, {}, this);
};

ko.applyBindings(new ViewModel(data));

希望这有帮助。