Knockout mapping:在映射的create中调用getJSON

时间:2013-12-29 16:17:14

标签: knockout.js getjson knockout-mapping-plugin

我有一个带有包含URL列表的元素的JSON。

(例如{'nome':'MyName', 'impila_tipo_lista': ['http://','http://',],}

我想通过$ .getJSON调用每个网址来填充(并替换)此列表与相应项目列表(json:{'nome':'MyOtherName',}。

var TipiDiFrammentiModel = function(url) {
    var self = this;

    $.getJSON(url, function(json) {
        viewModel.impila_tipo_lista.push(ko.mapping.fromJS(json));

        self.isEditable = ko.observable(false);
        self.setIsEditable = function() { self.isEditable(true) };
    });

}

// MAPPATURA
var mapping = {
    // ...
    impila_tipo_lista: {
        create: function(options) {
            return new TipiDiFrammentiModel(options.data)
        },
    },
};

// ISTANZA
var viewModel = {
}
//...

// RUNTIME
$.getJSON('/rest/pila/{{ pila.slug }}', function(data) {
    ko.mapping.fromJS(data, mapping, viewModel);

    ko.applyBindings(viewModel);
});

到目前为止,这是我丑陋的解决方法。

ko.toJSON($data,null,4):

{
    "nome": "MyName",
    ...
    "impila_tipo_lista": [
        {},
        {},
        {},
        {}
    ],
    "__ko_mapping__": {
        "impila_lista": {},
        "impila_tipo_lista": {},
        "ignore": [],
        "include": [
            "_destroy"
        ],
        "copy": [],
        "observe": [],
        "mappedProperties": {
            "url": true,
            "nome": true,
            "slug": true,
            "impila_tipo_normale": true,
            "prosegui": true,
            "impila_lista": true,
            "impila_tipo_lista": true
        },
        "copiedProperties": {}
    }
}

BTW我无法用新项目重新替换原始网址。确实,我前段时间解决了这个难题,使用getJSON并将项目直接替换为ko.mapping中的url创建...哦,我的!

编辑:排序。仍然很丑,但工作:

$.getJSON('/rest/pila/{{ pila.slug }}', function(data) {
    ko.mapping.fromJS(data, mapping, viewModel);

    $.each(viewModel.impila_tipo_lista(), function(i, val) {            
        $.getJSON(val, function(json) { 
            viewModel.impila_tipo_lista.splice(i, 1, ko.mapping.fromJS(json));
        });
    });

    ko.applyBindings(viewModel);
});

编辑2:这有效。 但是请注意,代码:如果要删除finally $.each part,我在创建时启用impila_tipo_lista自定义,完全相同 impila_lista ,对于 impila_lista impila_tipo_lista,映射可能会失败

// MODELLI
var FrammentiModel = function(url) {
    var self = this;

    $.getJSON(url, function(json) {
        self.isEditable = ko.observable(false);
        self.setIsEditable = function() { self.isEditable(true) };

        self.advancedEdit = ko.observable(false);
        self.toggleAdvancedEdit = function() { self.advancedEdit(!self.advancedEdit()) };

        self.needCreate = ko.observable(false);

        ko.mapping.fromJS(json, mapping.impila_lista, self);
    });
}

var TipiDiFrammentiModel = function(url) {
    var self = this;

    $.getJSON(url, function(json) {

        ko.mapping.fromJS(json, mapping.impila_tipo_lista, self);
    });
}

// MAPPATURA
var mapping = {
    impila_lista: {
        create: function(options) {
            return new FrammentiModel(options.data)
        },
    },
    impila_tipo_lista: {
        //create: function(options) {
        //    return new TipiDiFrammentiModel(options.data)
        //},
    },
};

$.getJSON('/rest/pila/{{ pila.slug }}', function(data) {
    ko.mapping.fromJS(data, mapping, viewModel);

    $.each(viewModel.impila_tipo_lista(), function(i, val) {            
        $.getJSON(val, function(json) { 
            viewModel.impila_tipo_lista.splice(i, 1, ko.mapping.fromJS(json));
        });
    });

    ko.applyBindings(viewModel);
});

0 个答案:

没有答案