MVC DataTable 中的 KnockoutJS 删除功能

Question

我遵循了在http://www.dotnetcurry.com/aspnet-mvc/933/knockoutjs-aspnet-mvc-tutorial-beginner 找到的教程。该教程很棒，涵盖了添加和更新，但是没有包含用于删除或取消更新的单击处理程序。

我尝试遵循作者提供的保存数据的相同模式，并创建了一个删除函数，但这不起作用。

function deleteData(currentData) {
    var postUrl = "";
    var submitData = {
        concerns_id: currentData.concerns_id(),
        concerns_description: currentData.concerns_description(),
    };
    if (currentData.concerns_id > 0) {
        postUrl = "/concerns/delete"
    }
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: postUrl,
        data: JSON.stringify(submitData)
    }).done(function (id) {
        currentData.concerns_id(id);
    }).error(function (ex) {
        alert("ERROR Deleting");
    })
};

这是桌子：

<table class="table">
    <tr>
      <th>concerns_id</th>
      <th>concerns_description</th>
      <th></th>
    </tr>
  <tbody data-bind="foreach: ConcernCollection">
     <tr data-bind="template: { name: Mode, data: $data }"></tr>
  </tbody>
</table>

模板：

<script type="text/html" id="display">
  <td data-bind="text: concerns_id"></td>
  <td data-bind="text: concerns_description"></td>
  <td>
    <button class="btn btn-success kout-edit">Edit</button>
    <button class="btn btn-danger kout-delete">Delete</button>
  </td>
</script>

<script type="text/html" id="edit">
  <td><input type="text" data-bind="value: concerns_id " /></td>
  <td><input type="text" data-bind="value: concerns_description" /></td>
  <td>
    <button class="btn btn-success kout-update">Update</button>
    <button class="btn btn-danger kout-cancel">Cancel</button>
  </td>
</script>

没有我绑定的删除功能的完整 JS 添加：

$(document).ready(function () {
$.ajax({
    type: "GET",
    url: "/concerns/GetConcerns",
}).done(function (data) {
    $(data).each(function (index, element) {
        var mappedItem =
            {
                concerns_id: ko.observable(element.concerns_id),
                concerns_description: ko.observable(element.concerns_description),
                Mode: ko.observable("display")
            };
        viewModel.ConcernCollection.push(mappedItem);
    });
    ko.applyBindings(viewModel);
}).error(function (ex) {
    alert("Error");
});

$(document).on("click", ".kout-edit", null, function (ev) {
    var current = ko.dataFor(this);
    current.Mode("edit");
});

$(document).on("click", ".kout-update", null, function (ev) {
    var current = ko.dataFor(this);
    saveData(current);
    current.Mode("display");
});



$(document).on("click", "#create", null, function (ev) {
    var current = {
        concerns_id: ko.observable(0),
        concerns_description: ko.observable(),
        Mode: ko.observable("edit")
    }
    viewModel.ConcernCollection.push(current);
});

 function saveData(currentData) {
      var postUrl = "";
      var submitData = {
          concerns_id: currentData.concerns_id(),
          concerns_description: currentData.concerns_description(),
      };
      if (currentData.concerns_id && currentData.concerns_id() > 0) {
          postUrl = "/concerns/Edit"
      }
      else {
          postUrl = "/concerns/Create"
      }
      $.ajax({
          type: "POST",
          contentType: "application/json",
          url: postUrl,
          data: JSON.stringify(submitData)
      }).done(function (id) {
          currentData.concerns_id(id);
      }).error(function (ex) {
          alert("ERROR Saving");
      })
  }
});

任何帮助或指导都会得到学徒这是我第一次使用 Knockout.js

谢谢，

Answer 1

我不会撒谎，您的代码有点难以理解。我真的不认为你得到了完整的淘汰赛经验。我整理了一个小演示，向您展示如何使用敲除从列表中添加/删除项目并显示它们。

data-binding 应使用淘汰赛。老实说，您应该永远不需要使用 jQuery 按类附加侦听器。这就是你的代码变成意大利面条的方式。

虽然您的问题没有提出，但我强烈建议您访问http://learn.knockoutjs.com/，然后再继续您的教程。

我希望这会有所帮助！

function ViewModel() {
  var self = this;

  self.Items = ko.observableArray();


  self.DeleteRow = function(row) {
    // Your ajax call here
    self.Items.remove(row);
  }

  self.AddRow = function() {
    self.Items.push("Added Item at " + new Date());
  }

  self.LoadFakeData = function() {
    // Put ajax calls here
    for (i = 0; i < 10; i++) {
      self.Items.push("Item " + i);
    }
  }

  self.Load = function() {
    self.LoadFakeData();
  }

  self.Load();
}

ko.applyBindings(new ViewModel())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach: Items">
  <span data-bind="text: $data"></span>
  <span data-bind="click: $parent.DeleteRow">X</span>
  <br>
</div>
<hr>
<span data-bind="click: AddRow">Add Row</span>