【问题标题】:knockoutjs mapping custom objects with nesting array用嵌套数组映射自定义对象的淘汰赛js
【发布时间】:2013-04-11 19:57:04
【问题描述】:

我想将此 json 映射到自定义对象。 问题是项目不是类型项目对象而是普通对象。 我在这里缺少什么?

你可以在这里测试:http://jsfiddle.net/5jhpE/

var json = [
    {
        id: 1,
        items: [
            {id: 1, name: 'item1'},
            {id: 2, name: 'item2'},
            {id: 3, name: 'item3'}
        ]
    },
    {
        id: 2,
        items: [
            {id: 4, name: 'item4'},
            {id: 5, name: 'item5'},
            {id: 6, name: 'item6'}
        ]
    },
]

function Data(data) {
    ko.mapping.fromJS(data, {}, this);
}

function Item(data) {
    ko.mapping.fromJS(data, {}, this);
}
var map = {
    create: function(options) {
        return new Data(options.data);
    },
    items: function(options) {
        return new Item(options.data);
    },
}

var res = ko.mapping.fromJS(json, map);

输出:

console.log(res());
[Data, Data]
--
console.log(res()[0].items());
[Object, Object, Object] <-- Here I want to have [Item, Item, Item]

【问题讨论】:

    标签: javascript knockout.js knockout-mapping-plugin knockout-2.0


    【解决方案1】:

    我以这种方式更改了您的映射器选项

    var map = {
        'items': {
            create: function(options) {
                return new Item(options.data);
            }
        }
    }
    

    而且看起来还不错; 可以试试吗?

    如果您需要:jsfiddle 控制台输出是 [Item, Item, Item] 你想要的;


    我允许补充一点建议:如果您需要以这种方式测试 typeof:

    typeof res()[0].items()[0]
    

    注意,这可能很棘手!

    为了避免任何问题,我通常这样声明Item viewModel:

    function Item(data) {
        var self = this;
        self.myType = 'item';
        ko.mapping.fromJS(data, {}, this);
    }
    

    所以你可以简单地测试,例如:

    if('item' === res()[0].items()[0].myType) {
      //do something...
    }
    

    这个“myType”技巧是前段时间在stackoverflow中建议的:我会在找到帖子后立即在此处发布链接

    【讨论】:

    • 哇!!很多朋友!我很累,错过了create
    【解决方案2】:

    看看这个问题:Map JSON data to Knockout observableArray with specific view model type

    它映射自定义嵌套对象,还包含一个这样做的小提琴。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-10-14
      • 2015-01-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-04-27
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多