Knockout.JS：“删除”请求

Question

为什么从表格中删除元素并刷新页面不起作用？ 我得到了一个带有删除方法的 web api，它在 Postman 上运行得很好。 我不知道我做错了什么。我已经使用 jquery 和 knockout 实现了 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());