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，我可以通過使用下面的代碼來完成這部分。但我不理解如何通過淘汰賽js實現這一點，無法弄清楚如何告訴淘汰賽來揭示用戶選擇的記錄的所有字段。

// 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中具有可觀察的元素。例如，您的DeleteButton應該有一個visible結合：

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

您通常不需要使用淘汰賽時對元素的ID，因爲你沒有選擇他們與他們擺弄。你改變他們綁定的內容，Knockout更新元素。

如果你有喜歡的東西

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

你會做這樣的事情

incidentId(incident.ID); 

在你的視圖模型

，其中incidentId是可觀察到的。你有沒有通過the Knockout tutorials？這些文檔相當不錯，而且這些教程對於理解如何做事非常有幫助。