Knockout.JS： '削除'リクエスト

Question

なぜ要素をテーブルから削除してページを更新できないのですか？ 私はPostmanでうまく動作する削除メソッドを実装したWeb APIを手に入れました。 私は何が間違っているのか分かりません。私はjqueryとノックアウトを使ってgetを実装しました。

<table data-bind="foreach: students"> 
     <tr> 
      <th>ID</th> 
      <th>Nume</th> 
      <th>Prenume</th> 
      <th>Data</th> 
     </tr> 
     <tr> 
      <td><input type="text" id="id_" size="1" data-bind="value: StudId" disabled="disabled"></td> 
      <td><input type="text" size="60" data-bind="value: Nume" disabled="disabled"></td> 
      <td><input type="text" size="60" data-bind="value: Prenume" disabled="disabled"></td> 
      <td> 
       <input type="text" size="15" data-bind="value: Data" disabled="disabled"> 
       <input type="button" value="Sterge" class="button button1" id="sterge" /> 
       <input type="button" class="button button2" value="Editeaza" /> 
      </td> 
     </tr> 
    </table> 
    <br /><br /> 
</div> 

var uri = 'api/student' 

function studentModel() { 
    var self = this; 
    self.students = ko.observableArray([]); 

    $.getJSON(uri, function (data) { 
     self.students(data); 
    }) 
} 
ko.applyBindings(new studentModel()); 

$(function() { 
    $('#sterge').click(function() { 
     var id = $('#id_').val(); 
     $.ajax({ 
      type: 'DELETE', 
      url: uri + '/' + id, 
      success: function (result) { 
       alert('Student sters cu succes! '); 
       location.reload(); 
      }, 
      error: function (error) { 
       alert('Stergere esuata! '); 
      } 
     }); 
    }); 
}); 

Answer 1

ここで間違って行く二つのものがあります。

1. あなたは、イベントリスナーを装着しているときに、それらが接続する必要がある要素がまだ存在していません。
2. foreachバインディング内にあるid属性を使用しています。これによりIDが重複します。

ノックアウトがそのバインディングを適用する場合、観測可能な配列はまだ空です。studentsそのアイテムはAPI経由でロードされます。

私はclickバインディングを使用して削除方法を添付することをお勧めします。 id属性も削除する必要があります。ここで

var testData = [ 
 
    { StudId: 1, Nume: "Jane", Prenume: "Deer", Data: 14 }, 
 
    { StudId: 2, Nume: "John", Prenume: "Doe", Data: 10 } 
 
]; 
 

 

 

 
var uri = 'api/student'; 
 

 
var StudentsViewModel = function() { 
 
    this.students = ko.observableArray(); 
 

 
    this.loadStudents(); 
 
}; 
 

 
StudentsViewModel.prototype.loadStudents = function() { 
 
    var self = this; 
 
    $.getJSON(uri, function(data) { 
 
    self.students(data); 
 
    }); 
 
}; 
 

 
StudentsViewModel.prototype.deleteStudent = function(id) { 
 
    console.log("Post delete for id: " + id); 
 
    $.ajax({ 
 
    type: 'DELETE', 
 
    url: uri + '/' + id, 
 
    success: function(result) { 
 
     alert('Student sters cu succes! '); 
 
    }, 
 
    error: function(error) { 
 
     alert('Stergere esuata! '); 
 
    } 
 
    }); 
 
    
 
    
 
}; 
 

 
// Mock jquery ajax stuff 
 
var $ = { 
 
    getJSON: function(uri, cb) { 
 
    setTimeout(cb.bind(null, testData), 750); 
 
    }, 
 
    ajax: function() {} 
 
}; 
 

 
// Apply bindings 
 
ko.applyBindings(new StudentsViewModel());

input { width: 50px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<table > 
 
    <tr> 
 
    <th>ID</th> 
 
    <th>Nume</th> 
 
    <th>Prenume</th> 
 
    <th>Data</th> 
 
    </tr> 
 
    <!-- ko foreach: students --> 
 
    <tr> 
 
    <td> 
 
     <input data-bind="value: StudId" type="text" size="1" disabled="disabled"> 
 
    </td> 
 
    <td> 
 
     <input data-bind="value: Nume" type="text" size="60" disabled="disabled"> 
 
    </td> 
 
    <td> 
 
     <input data-bind="value: Prenume" type="text" size="60" disabled="disabled"> 
 
    </td> 
 
    <td> 
 
     <input data-bind="click: $parent.deleteStudent.bind($parent, $data.StudId)" type="button" value="Sterge" class="button button1"/> 
 
    </td> 
 
    </tr> 
 
    <!-- /ko --> 
 
</table> 
 
<br /> 
 
<br /> 
 
</div>

Answer 2

あなたがやりたいためにクリーンな方法です：https://jsfiddle.net/kyr6w2x3/23/

<table data-bind="foreach: students"> 
     <tr> 
      <th>ID</th> 
      <th>Nume</th> 
      <th>Prenume</th> 
      <th>Data</th> 
     </tr> 
     <tr> 
      <td><input type="text" id="id_" size="1" data-bind="value: StudId" disabled="disabled"></td> 
      <td><input type="text" size="60" data-bind="value: Nume" disabled="disabled"></td> 
      <td><input type="text" size="60" data-bind="value: Prenume" disabled="disabled"></td> 
      <td> 
       <input type="text" size="15" data-bind="value: Data" disabled="disabled"> 
       <input type="button" value="Sterge" class="button button1" id="sterge" data-bind="click:$parent.deleteItem"/> 
       <input type="button" class="button button2" value="Editeaza" data-bind="click:$parent.editItem"/> 
      </td> 
     </tr> 
    </table> 

JS：あなたが使用していないのはなぜ

var uri = [{StudId:1,Nume: "Test",Prenume: "AAAAA",Data:"DATA1"},{StudId:2,Nume: "Test2",Prenume: "BBBB",Data:"DATA2"},{StudId:3,Nume: "Test3",Prenume: "CCCC",Data:"DATA3"}] 

function mainModel() { 
    var self = this; 
    self.students = ko.observableArray([]); 

    // Assuming you're getting your data here 
    self.students($.map(uri, function (item) { 
     return new studentModel(item); 
    })); 

    self.deleteItem = function (data){ 
    // here you send your ajax 
     console.log("Delete : Ready to send ajax for id: ",data.StudId()); 
     $.ajax({ 
       type: 'DELETE', 
       url: uri + '/' + data.StudId(), 
       success: function(result) { 
        ko.utils.arrayFirst(self.students(), function (item) { 
        if(item){ 
         if(item.StudId() === data.StudId()){ 
          self.students.remove(item); 
         } 
         } 
        }); 
       }, 
      error: function(error) { 
        alert('Stergere esuata! '); 
       } 
     }); 

    } 

    self.editItem = function (data){ 
    // here you send your ajax 
    console.log("Edit :Ready to send ajax for id: ",data.StudId()); 
    } 
} 
function studentModel(data) { 
    var self = this; 
    self.StudId = ko.observable(data.StudId); 
    self.Nume = ko.observable(data.Nume); 
    self.Prenume = ko.observable(data.Prenume); 
    self.Data = ko.observable(data.Data) 
} 
ko.applyBindings(new mainModel());