无法使用 Knockoutjs 从可观察数组中删除项目
Cannot remove items from observable array using Knockoutjs
使用knockoutjs,我正在尝试从名为users的可观察数组中删除一个用户。也许由于我的视图模型在 document.ready 函数中,它无法按预期工作?
以下是以下代码的背景:我的应用程序从三个不同的 Salesforce 组织中提取 JSON 数据,并将其放在三个不同的表中(每个组织一个)。加载页面后,应用程序会立即创建一个包含可观察数组的视图模型。还有一个名为 User 的类构造函数,它使 approvalDate 可观察。这些表按批准日期升序排序,如标记中的 foreach 循环所示。
对于我使用的"删除"按钮
data-bind="click: $root.removeUser"
我使用根前缀使 KO 在我的顶级视图模型上而不是在绑定的用户实例上查找 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
我只是想知道为什么不使用users().sort(....)而不是user.sort(...)在你的绑定中。我刚刚在 jsfiddle 中进行了测试,我无法像您那样绑定数据。
<ul data-bind="foreach: Items().sort()">
相关文章:
- knockoutjs可观察数组
- 将js对象更改为使用嵌套的可观察数组敲除js视图模型
- 敲除:可观察数组没有被正确绑定——只有1个结果显示,而api返回6
- $scope$观察数组中的一个特定对象——Angular JS控制器
- 如何使用敲除映射将空值映射到空的可观察数组
- 以不同的方式对相同的可观察数组进行排序
- 如何在 Knockout.js 中更新可观察数组后立即使用 DOM 容器
- Knockout.js:如何根据可观察数组中的更改更改值
- 使用挖空.js如何刷新 Select 元素中的可观察数组
- 更新挖空中可观察数组中项目的属性
- 动态地向可观察数组中的特定项添加绑定(例如hasfocus)
- AngularJS:观察数组属性
- 对可观察数组foreach的更新删除了格式化knockoutjs
- 当通过Ajax成功回调更新可观察数组时,启用绑定中断
- 如何获取复选框值并将其插入到挖空中的可观察数组中
- 剔除不更新辅助表的可观察数组
- 如何让Knockout可观察数组与jQuery对话框一起工作
- 更改可观察数组会更改自定义绑定处理程序knockoutjs的可见性
- 正在更新Knockoutjs可观察数组项
- Knockout,无法解析空可观察数组中的绑定错误