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

Question

对于冗长的解释，我提前表示歉意。我有一个加载记录网格的 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 });
});

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

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

        });
        }
    });

},

这是我迄今为止编写的 knockout 代码:

<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>

此时我非常感谢任何帮助。

Answer 1

对于 View 中每个不同的状态元素，您都希望在 View 模型中拥有一个可观察对象。例如，您的 DeleteButton 应该具有 visible 绑定(bind):

<button data-bind="visible:showDeleteButton">...

使用 Knockout 时，通常不需要元素上有 id，因为您不必选择它们来摆弄它们。您更改它们所绑定(bind)的内容，Knockout 就会更新该元素。

哪里有类似的东西

$('#Incident_ID').val(incident.ID);

你会做类似的事情

incidentId(incident.ID);

在你的 View 模型中，其中incidentId是一个可观察的。你经历过the Knockout tutorials吗？ ？文档非常好，教程对于了解如何做事非常有帮助。