[英]Dynamically accessing properties of knockoutjs observable array
我正在使用以下代码来处理排序功能。 它为我工作。 但是有什么方法可以使代码通用,因此我可以在需要时使用它。
<span class="sorting" data-bind="click: function(){ ui.items.sort(function(a,b){ return a.Username < b.Username ? -1 : 1; }); }">User Name</span>
<span class="sorting" data-bind="click: function(){ ui.items.sort(function(a,b){ return a.Firstname < b.Firstname ? -1 : 1; }); }">
First Name</span>
<span class="sorting" data-bind="click: function(){ ui.items.sort(function(a,b){ return a.Lastname < b.Lastname ? -1 : 1; }); }">
Last Name</span>
脚本
ui = new ListUI(config);
ko.applyBindings(ui);
var ListUI = function ListUIF(config) {
this.items = ko.observableArray([]);
}
var item = function itemF(data) {
var self = this;
self.Username = ko.observable(data.Username);
self.Firstname = ko.observable(data.Firstname);
self.Lastname = ko.observable(data.Lastname);
}
上面的代码工作正常,但是我不希望重复排序代码。
<span class="sorting" data-bind="click: function(){ ui.items.sort(function(a,b){ return a.Lastname < b.Lastname ? -1 : 1; }); }">
Last Name</span>
相反,我想要这样的东西
<span class="sorting" data-bind="click: sortFunction">
Last Name</span>
var sortFunction = function sortFunctionF(a, b){
return a.Username < b.Username : -1 : 1; //How to make this common for other property also like Firstname, Lastname etc.
}
基本上有两个选项:具有三个单独的函数sortByUsername
, sortByFirstname
和sortByLastname
,或者您可以执行自定义绑定,以接收其他信息并设置排序。
第二个可能看起来像这样:
<span class="sorting" data-bind="sortFunction: 'Username'">User Name</span>
<span class="sorting" data-bind="sortFunction: 'Firstname'">
First Name</span>
<span class="sorting" data-bind="sortFunction: 'Lastname'}">
Last Name</span>
然后是sortFunction的自定义绑定:
ko.bindingHandlers.sortFunction = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var sortBy = ko.utils.unwrapObservable(valueAccessor());
var items = viewModel.items;
$(element).unbind('click.sort').bind('click.sort', function() {
items.sort(function(a, b) {
return a[sortBy]() < b[sortBy]() ? -1 : 1;
});
});
}
}
Joeseph提到的另一种选择是将属性名称传递给click函数,然后单击函数。 我认为这不是自定义绑定的好选择,但这是一个小提琴:
<span class="sorting" data-bind="click: getSortFunction('Username')">User Name</span>
<span class="sorting" data-bind="click: getSortFunction('Firstname')">
First Name</span>
<span class="sorting" data-bind="click: getSortFunction('Lastname')}">
Last Name</span>
然后,您的viewmodel将更改为添加功能:
var ListUI = function ListUIF(items) {
var self = this;
self.items = ko.observableArray(items);
self.getSortFunction = function(prop) {
return function() {
self.items.sort(function(a, b) {
return a[prop]() < b[prop]() ? -1 : 1;
});
};
};
return self;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.