动态存取knockoutjs观察的阵列的属性 [英] Dynamically accessing properties of knockoutjs observable array

问题描述

我使用的是低于code处理排序功能。这是为我工作。但有什么办法，使code作为共同的，所以我可以用它需要的时候。

 ＆LT;跨度类=排序数据绑定=点击：功能（）{ui.items.sort（功能（A，B）{返回a.Username＆LT; b.Username -1：1;}）;}＆gt;用户名和LT; / SPAN＆GT;＆LT;跨度类=排序数据绑定=点击：功能（）{ui.items.sort（功能（A，B）{返回a.Firstname＆LT; b.Firstname -1：1;}）; }＆GT;
            名＆LT; / SPAN＆GT;＆LT;跨度类=排序数据绑定=点击：功能（）{ui.items.sort（功能（A，B）{返回a.Lastname＆LT; b.Lastname -1：1;}）; }＆GT;
            姓＆LT; / SPAN＆GT;
 

脚本

  UI =新ListUI（配置）;ko.applyBindings（UI）;
VAR ListUI =功能ListUIF（配置）{
   this.items = ko.observableArray（[]）;
}VAR项目=功能itemF（数据）{        VAR自我=这一点;        self.Username = ko.observable（data.Username）;
        self.Firstname = ko.observable（data.Firstname）;
        self.Lastname = ko.observable（data.Lastname）;
}
 

在code以上工作正常，但我不想重复分拣code。

 ＆LT;跨度类=排序数据绑定=点击：功能（）{ui.items.sort（功能（A，B）{返回a.Lastname＆LT; b.Lastname -1：1;}）;}＆GT;
            姓＆LT; / SPAN＆GT;
 

相反，我想是这样的。

 ＆LT;跨度类=排序数据绑定=点击：sortFunction＆GT;
            姓＆LT; / SPAN＆GT;VAR sortFunction =功能sortFunctionF（A，B）{   返回a.Username＆LT; b.Username：-1：1; //如何使这种常见的其他财产也喜欢名字，姓氏等。 }
 

解决方案

有两种基本选择：有三个独立的功能 sortByUsername ， sortByFirstname 和 sortByLastname ，或者你可以做一个自定义绑定，它接受更多的信息，并设置了排序。

第二个可能是这个样子：

 ＆LT;跨度类=排序数据绑定=sortFunction：用户名＆gt;用户名和LT; / SPAN＆GT;＆LT;跨度类=排序数据绑定=sortFunction：'姓'＆GT;
        名＆LT; / SPAN＆GT;＆LT;跨度类=排序数据绑定=sortFunction：'姓'}＆GT;
        姓＆LT; / SPAN＆GT;
 

然后自定义为sortFunction绑定：

  ko.bindingHandlers.sortFunction = {
    更新：功能（元素，valueAccessor，allBindingsAccessor，视图模型）{
        变种sortBy = ko.utils.unwrapObservable（valueAccessor（））;
        VAR项目= viewModel.items;
        $（元素）.unbind（'click.sort'）。绑定（click.sort'，函数（）{
            items.sort（功能（A，B）{
                返回[sortBy]（）＆下; B〔sortBy]（）？ -1：1;
             }）;
        }）;
    }
}
 

小提琴

由Joeseph提到的另一个选项，将属性名传递到点击功能，然后将返回的功能。我不认为这是很好的一个选择，因为自定义绑定，但这里的，做了小提琴即：

 ＆LT;跨度类=排序数据绑定=点击：getSortFunction（用户名）＆gt;用户名和LT; / SPAN＆GT;＆LT;跨度类=排序数据绑定=点击：getSortFunction（'名字'）＆GT;
        名＆LT; / SPAN＆GT;＆LT;跨度类=排序数据绑定=点击：getSortFunction（'姓'）}＆GT;
        姓＆LT; / SPAN＆GT;
 

然后你的视图模型将发生变化，添加功能：

  VAR ListUI =功能ListUIF（项目）{
    VAR自我=这一点;
   self.items = ko.observableArray（项目）;    self.getSortFunction =功能（丙）{
        返回功能（）{
            self.items.sort（功能（A，B）{
                返回[丙]（）＆下; B〔托（）？ -1：1;
            }）;
        };
    };    返回自我;
}
 

I am using the below code for handling sort functionality. It is working for me. But is there any way to make the code as common and so i can use it whenever needed.

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

scripts

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

The code above is working fine, but i didn't want the sorting code to be repeated.

<span class="sorting" data-bind="click: function(){ ui.items.sort(function(a,b){   return a.Lastname < b.Lastname ? -1 : 1; }); }">
            Last Name</span>

Instead i want something like this

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

 }

解决方案

There's basically two options: Have three separate functions sortByUsername, sortByFirstname and sortByLastname, or you could do a custom binding that takes in additional information and sets up the sort.

The second one could look something like this:

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

And then the custom binding for 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

Another option as mentioned by Joeseph would be to pass the property name into the click function, which would then return a function. I don't think this is as nice an option as the custom binding, but Here's a fiddle that does that:

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

And then your viewmodel would change to add the function:

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

这篇关于动态存取knockoutjs观察的阵列的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！