无法使用 Knockoutjs 从可观察数组中删除项目

Question

我正在尝试使用 knockoutjs 从名为 users 的可观察数组中删除一个用户。也许由于我的 viewModel 在 document.ready 函数中，它没有按预期工作？

下面是代码的背景：我的应用程序从三个不同的 Salesforce 组织中提取 JSON 数据，并将其放置在三个不同的表中（每个组织一个）。加载页面时，应用程序会立即创建一个包含可观察数组的视图模型。还有一个名为 User 的 class 构造函数，它使 approvalDate 可观察。如标记中的 foreach 循环所示，表格按批准日期升序排序。

对于我使用的删除按钮

data-bind="click: $root.removeUser"

我使用根前缀让 KO 在我的顶级视图模型上而不是在绑定的 User 实例上寻找 removeUser 处理程序。

如有任何建议，我们将不胜感激。谢谢！

查看模型：

function User(id, name, profile, userRole, lastLoginDate, approvalDate, salesforceOrg) {
    this.id = id;
    this.name = name;
    this.profile = profile;
    this.userRole = userRole;
    this.lastLoginDate = lastLoginDate;
    this.approvalDate = ko.observable(approvalDate);
    this.SalesforceOrg__c = salesforceOrg;
  }

  $(function () {
    var viewModel = function (updateUarUrl, userRecords) {
      var self = this;

  self.updateUarUrl = updateUarUrl 

  self.users = ko.observableArray([]);

  for (i = 0; i < userRecords.length; i++) {
    var newUser = new User(
      userRecords[i].Id, userRecords[i].Name, userRecords[i].Profile, userRecords[i].UserRole,
      userRecords[i].LastLoginDate, userRecords[i].ApprovalDate__c, userRecords[i].SalesforceOrg__c);
    self.users.push(newUser);
  }

  self.removeUser = function (user) {
    self.users.remove(user);
  }

  self.checkDate = function (date) {
    var lastLoginDate = new Date(date);
    var today = new Date();
    var difference = (today - lastLoginDate) / 86400000; // to change miliseconds into days divide by this number

    if (difference > 89) {
        return true;
    }
    return false;
  };


};

  $.getJSON("@Url.Action("GetUser")", function(allData) {
    // Bind the ViewModel to the View using Knockout
    // ko.applyBindings(myViewModel, document.getElementById('someElementId')) restricts the activation to the element with ID someElementId and its descendants
    ko.applyBindings(new viewModel('@Url.Action("PostGscUarLog")', allData.gscUsers), document.getElementById("gsc"));
    ko.applyBindings(new viewModel('@Url.Action("PostDsUarLog")', allData.dsUsers), document.getElementById("ds"));
    ko.applyBindings(new viewModel('@Url.Action("PostCompassUarLog")', allData.compassUsers), document.getElementById("compass"));
  });
});

查看：

@foreach (var table in tables) 
{
  <h2>@table.Desc Users</h2>
  <table class="table" id="@table.Id">
    <thead>
      <tr>
        <th>Name</th>
        <th>Profile</th>
        <th>Role</th>
        <th>Last Login Date</th>
        <th>Approval Date</th>
        <th>Business Reason</th>
      </tr>
    </thead>
    <tbody data-bind="foreach: users.sort(function (l, r) { return new Date(l.approvalDate()) - new Date(r.approvalDate()) })">
      <tr>
        <td data-bind="text: name"></td>
        <td data-bind="if: profile"><span data-bind="text: profile.Name"></span></td>
        <td data-bind="if: userRole"><span data-bind="text: userRole.Name"></span></td>
        <td data-bind="if: lastLoginDate"><span data-bind="text: moment(lastLoginDate).format('LL')"></span></td>
        <td data-bind="if: approvalDate()"><span data-bind="text: moment(approvalDate()).format('LL')"></span></td>
        <td><input data-bind="attr: { id: name }, enable: $parent.checkDate(lastLoginDate) == true" type="text" /></td>
        <td><button type="button" data-bind="click: $root.removeUser">Remove</button></td>
      </tr>
    </tbody>
  </table>
}

调试截图： https://www.dropbox.com/s/bl0p2wfqhpp1orb/1-16-2015%201-11-09%20PM.gif?dl=0

Answer 1

我只是想知道您为什么不在绑定中使用 users().sort(....) 而不是 users.sort(...)。我刚刚在 jsfiddle 中进行了测试，我无法像您那样绑定数据。

<ul data-bind="foreach: Items().sort()">

无法使用 Knockoutjs 从可观察数组中删除项目

Cannot remove items from observable array using Knockoutjs

javascript

jquery

knockout.js