KnockoutJS-使用简单的选择输入发出绑定

Question

I'm new to the forums and learning knockout. I'm having issues wrapping my head around how to properly bind a select input and save it to an ajax call. So far I have the 2 way binds working fine using simple inputs. Im just looking to get some guidance and how to properly save it to an ajax and retrive data from ajax and populate the data.

Just looking for tips or if anyone has any examples to look at. I would really appreciate it.

HTML:

<select data-bind="options: available_exploitants_HPSM" multiple="true"></select>
<input data-bind="value: test">
<input data-bind="value: test2">

Here is my view model:

incidentViewModel = function IncidentViewModel() {
 var self = this;
 self.incidents = ko.observableArray();
 self.currentIncident = ko.observable();
 available_exploitants_HPSM = ko.observableArray(["1","2","3"]);


self.fetchdata = function() {
 $.getJSON(Incident.BASE_URL+filterlist+orderlist,
 function(data) { 
 if (data.d.results) { 
 self.incidents(data.d.results.map(function(item) {
 return new Incident(item);
 }));
 $('#loading').hide("slow");
 $('#IncidentTable').show("slow");
 }else {
 console.log("no results received from server");
 }
 });
    }


self.saveorupdate = function() {
 var id = this.ID,
 url = Incident.BASE_URL + (id ? '(' + encodeURIComponent(id) + ')' : '');
 console.log(url);
 return $.ajax(url, {
 type: id ? "MERGE" : "POST",
 data: ko.toJSON({
 test: this.Description,
 test2: this.Incident,
 composante: this.composante
 }),
 processData: false,
 contentType: "application/json;odata=verbose",
 headers: "accept": "application/json;odata=verbose","If-Match": "*",
 success: function (data) {
 incidentViewModel.fetchdata();

 } 
 });
 }
}


function Incident(data) {
var self = this;
self.composante = ko.observable(data.composante);
self.test= ko.observable(data.test);
self.test2= ko.observable(data.test2);

}


var incidentViewModel = new IncidentViewModel();
ko.applyBindings(incidentViewModel);

Answer 1

Changes that I would have made:

1) in incidentViewModel :

...
return new Incident(item, self);
...

2) move saveorupdate to Incident model and edit it to:

function Incident(data, viewmodel) {
    var self = this;
    self.composante = ko.observable(data.composante);
    self.test = ko.observable(data.test);
    self.test2 = ko.observable(data.test2);
    self.id = data.id // you need id to use below in ajax
    self.saveorupdate = function() {
        var id = self.id, // changed to 'self'
            url = Incident.BASE_URL + (id ? '(' + encodeURIComponent(id) + ')' : '');
        console.log(url);
        return $.ajax(url, {
            type: id ? "MERGE" : "POST",
            data: {
                test: self.test(), //Description,
                test2: self.test2(), //Incident,
                composante: self.composante() // changed to 'self'
            },
            processData: false,
            contentType: "application/json;odata=verbose",
            headers: "accept": "application/json;odata=verbose",
            "If-Match": "*",
            success: function(data) {
                viewmodel.fetchdata();
            }
        });
    }

}