动态访问knockoutjs可观察数组的属性

时间:2013-05-02 13:52:56

标签: javascript jquery asp.net-mvc-4 knockout.js

我使用以下代码处理排序功能。它对我有用。但有没有办法让代码变得普通,所以我可以随时使用它。

<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.

 }

1 个答案:

答案 0 :(得分:1)

基本上有两个选项:有三个独立的函数sortByUsernamesortByFirstnamesortByLastname,或者你可以做一个自定义绑定,它接收额外的信息并设置排序。

第二个看起来像这样:

<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;
             });
        });
    }
}

Fiddle

Joeseph提到的另一个选项是将属性名称传递给click函数,然后返回一个函数。我不认为这是一个比自定义绑定更好的选项,但是Here's这样做的小提琴:

<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;
}