Knockout JS-点击加载所选项目的模态编辑表单

我提前为冗长的解释道歉。我有一个加载记录网格的web应用程序。每个网格行只显示总记录的一部分。对于每一行记录，用户都会看到网格上的"编辑"按钮。到目前为止，我的web应用程序完全可以使用JQuery，但在我发现Knockout js后，我需要将其实现到我的web程序中。

KO时，我在按钮上设置data-bind="attr: { 'data-ID': ID }"，以识别正在编辑的记录。然后我可以获取按钮的ID并将其传递给我的功能，如下所示：

$(document).on("click", ".edit_button", function() {
var Button_ID = $(this).data("id");
IncidentManager.showIncidentDetails(Button_ID); 
$('#myModal').modal({ backdrop: 'static', keyboard: false });
});

单击Edit按钮将显示一个模态，并显示一个编辑器，显示他们所选记录的所有字段。这是我遇到最大麻烦的部分。使用JQuery，我可以通过使用下面的代码来完成这一部分。但我不知道如何用knocket js实现这一点，也不知道如何告诉knocket显示用户选择的记录的所有字段。

// This function will loadup the data into the modal form,
showIncidentDetails: function (Button_ID) {
    if (Button_ID == null) return;
    $.ajax({
        url: this.basePath()+'/GDI_PROD_Incidents('+Button_ID+')',
        cache: false,
        dataType: 'json',
        success: function (data) {
        $('#DeleteButton').show();
        $.each(data, function (index, incident) {
            $('#Incident_ID').val(incident.ID);
            $('#Description').val(incident.Description);
            $('#Composante').selectpicker('val', incident.Composante.split(","));
            $('#Incident').val(incident.Incident);
            $('#état').find('option[value="'+incident.ÉtatValue+'"]').attr("selected",true);
            $('#Priorité').find('option[value="'+incident.PrioritéValue+'"]').attr("selected",true);
            $('#Duré').val(incident.Duré);
            $('#DateDeDébut').val(incident.Date_de_début);
            $('#DateDeFin').val(incident.Date_de_fin);
            $('#support').selectpicker('val', incident.Groupe_Support_Prime.split(","));
            $('#Autres_Groupe_Support_Prime').attr('value', incident.Autres_Groupe_Support_Prime);
            $('#Prime').find('option[value="'+incident.ResponsableValue+'"]').attr("selected",true);
            $('#Impact').val(incident.Impact);
            $('#Temps_Consacré').attr('value', incident.Temps_Consacré);
            $('#Type_de_temps').find('option[value="'+incident.Type_de_tempsValue+'"]').attr("selected",true);
            $('#Journal_des_actions').val(incident.Journal_des_actions);
            $('#Dépannage_effectué').val(incident.Dépanage);
            $('#Suivi').val(incident.Suivi);
            $('#Ressources').val(incident.Ressources);
        });
        }
    });
},

这是我迄今为止写的淘汰代码：

<script type="text/html" id="Incidents">
<tr>
    <td class='over_flow_control'><button class='edit_button btn btn-default btn-sm' type='button' value='Edit' data-bind="attr: { 'data-ID': ID }"><i class='glyphicon glyphicon-edit'></i></button></td>
    <td class='over_flow_control' data-bind="text:Incident"></td>
    <td class='over_flow_control'><h4><span class='priorité_span' data-bind="text:PrioritéValue"></span></h4></td>
    <td class='over_flow_control' data-bind="text:Composante"></td>
    <td class='over_flow_control text-left' data-bind="text:Description"></td>
    <td class='over_flow_control Date_de_début_cell' data-bind="text:Date_de_début"></td>
    <td class='over_flow_control' data-bind="text:ResponsableValue"></td>    
</tr>
</script>
<script type="text/javascript">
function load_active_incidents() {
         var self = this;
         self.ActiveIncidents = ko.observableArray([]);
         $.getJSON("../../../../_vti_bin/listData.svc/GDI_PROD_Incidents?$filter=ÉtatValue%20ne%20%27Fermé%27&$orderby=PrioritéValue desc",function (data) {
         if (data.d.results) {
            self.ActiveIncidents(ko.toJS(data.d.results));
         }
        }
       );
     }
     $(document).ready(function () {
         ko.applyBindings(new load_active_incidents());
     });
 </script>

在这一点上，我真的很感激任何帮助。