Knockout.JS：“删除”请求

Posted 2023-05-09

【中文标题】Knockout.JS：“删除”请求

【英文标题】：Knockout.JS: 'delete' request

【发布时间】：2016-11-25 05:56:22

【问题描述】：

为什么从表格中删除元素并刷新页面不起作用？ 我得到了一个带有删除方法的 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! ');
            
        );
    );
);

【问题讨论】：

既然使用了敲除点击绑定，为什么不使用呢？请记住，“id”是文档中的唯一选择器。

@Matt.kaaj 我该怎么做？我是这一切的初学者..

查看我发布的删除事件绑定。

【参考方案1】：

这里有两个问题：

在您附加事件侦听器时，需要附加它们的元素尚不存在。 您在 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>

【讨论】：

非常感谢，我真的很困惑，但现在我明白了。真的很感激！

【参考方案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());

【讨论】：

我做错了什么？它似乎没有显示任何东西。我在浏览器中收到此错误：jquery-3.0.0.js:531 Uncaught TypeError: Cannot use 'in' operator to search 'length' in api/student