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

        });
        }
    });

},

这是我到目前为止编写的淘汰代码：

<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

对于视图中每个不同的状态元素，您将希望在viewmodel中拥有一个observable。例如，您的DeleteButton应该有visible绑定：

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

使用Knockout时，您通常不需要使用元素，因为您不必选择它们来摆弄它们。你改变他们绑定的东西，Knockout更新元素。

你有

之类的地方

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

你会做类似

的事情

incidentId(incident.ID);

在您的viewmodel中

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

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

1 个答案: