使用Knockout Mapping映射列表

时间:2015-06-18 08:35:50

标签: rest knockout.js

我创建了视图模型

var catalog = ko.observableArray();

$.ajax({
    type: "GET",
    url: "http://localhost:8080/ticket-service/rest/ticket/list",
    success: function(msg) {
        catalog.push.apply(catalog, $.map(msg, function(data) {
            return new Ticket(data)
        }));
        return catalog;
    },
    error: function(msg) {
        console.log(msg)
    }
});

和模型

    function Ticket(data) {
    this.ticketId = ko.observable(data.ticketId);
    this.ticketNo = ko.observable(data.ticketNo);
    this.ticketTitle = ko.observable(data.ticketTitle);
    this.longDescription = ko.observable(data.longDescription);
    this.createdBy = ko.observable(data.createdBy);
    this.createdOn= ko.observable(data.createdOn);
    this.assignTo = ko.observable(data.assignTo);
    this.priority = ko.observable(data.priority);
    this.dueDate = ko.observable(data.dueDate);
    this.status = ko.observable(data.status);
    this.projectId = ko.observable(data.projectId);
}

使用像这样的结束视图模型

    return {
        ticket: newTicket,
        searchTerm: searchTerm,
        catalog: filteredCatalog,
        newTicket: newTicket,
        addTicket: addTicket,
        delTicket: delTicket
    };
})();
console.log(vm);

ko.applyBindings(vm);

生成列表,添加和删除表单。问题是我如何使用可以从get方法列出的淘汰映射。

1 个答案:

答案 0 :(得分:1)

你需要做这样的事情

演示从您的代码中获取单个实体。

查看:

Output Preview :
<pre data-bind="text:ko.toJSON($data,null,2)"></pre>

<强>视图模型:

function Ticket(data) {
    this.ticketId = ko.observable(data.ticketId);
}

var mapping = {
    create: function (options) {
        return new Ticket(options.data);
    }
};

var ViewModel = function () {
    var self = this;
    self.catalog = ko.observableArray();
    var data = [{
        'ticketId': 1
    }, {
        'ticketId': 2
    }]

    //under ajax call do the same but pass 'msg' in place of data 
    self.catalog(ko.mapping.fromJS(data, mapping)())
    console.log(self.catalog()); // check console for output 
};

ko.applyBindings(new ViewModel());

示例工作小提琴 here