Mapping List with Knockout Mapping

问题

I have created view model

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)
    }
});

and the model

    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);
}

with at the end viewmodel like this

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

ko.applyBindings(vm);

produce list,add, and delete form.The question is how can i use knockout mapping that can list from get methode.

回答1:

you need to do something like this

Demonstrated taking a single entity from your code .

view:

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

viewModel:

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());

sample working fiddle here

来源：https://stackoverflow.com/questions/30910358/mapping-list-with-knockout-mapping

标签

rest

knockout.js