Question

我正在使用Knockout创建一个可排序表。表绑定，排序功能和过滤工作正常。但是，我希望在特定列处于活动状态时显示排序图标由于span已绑定到头数组中的visible属性，并且此属性是可观察的，因此当此值更改时（在sort函数中），UI应该更新，但不是。可能是什么导致了这个？这是JSFiddle：http://jsfiddle.net/ud3o79ag/1/

HTML：

<form action="#">
<input class="form-control" placeholder="Buscar…" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'"     autocomplete="off">
</form>
<table class="table table-bordered table-striped">
<thead>
    <tr data-bind="foreach: headers">
        <th data-bind="click: $parent.sort">
            <span data-bind="text: title"></span>
            <span class="glyphicon glyphicon-sort-by-alphabet" data-bind="visible:active"></span>
        </th>
    </tr>
</thead>
<tbody data-bind="name:author, foreach:authors">
<tr>
    <td data-bind="text:FirstName"></td>
    <td data-bind="text:LastName"></td>
    <td data-bind="text:Biography"></td>
    <td></td>
</tr>
</tbody>
</table>

JS /敲除：

    var viewModel = function()
    {
        var self  = this;

        self.query = ko.observable('');

        self.headers = [
            {title:'First Name',sortPropertyName:'FirstName', asc: true, active: ko.observable(false)},
            {title:'Last Name',sortPropertyName:'LastName', asc: true, active: ko.observable(false)},
            {title:'Biography',sortPropertyName:'Biography', asc: true, active: ko.observable(false)},
            {title:'Actions',sortPropertyName:'', asc: true, active: ko.observable(false)}
        ];

        self.activeSort = ko.observable(function(){return 0;});

        self.sort = function(header,event)
        {

            //if this header was just clicked a second time
            if(header.active) {
                header.asc = !header.asc; //toggle the direction of the sort
            }

            //make sure all other headers are set to inactive
            ko.utils.arrayForEach(self.headers, function(item){ item.active = false; } );

            //the header that was just clicked is now active
            header.active = true;//our now-active header

            var prop = header.sortPropertyName;

            var ascSort = function(a,b){ return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0;};
            var descSort = function(a,b){ return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0;};
            var sortFunc = header.asc ? ascSort : descSort;


            //store the new active sort function
            self.activeSort(sortFunc);
        };

        self.authors = ko.computed(function() {
            var search = self.query().toLowerCase();
            var result;
            var arrayresult;
            if (!search)
            {
                result = authors;
            }
            else
            {
                result = ko.utils.arrayFilter(authors, function(item) {
                    if (item['FirstName'].toLowerCase().indexOf(search) >= 0 || item.LastName.toLowerCase().indexOf(search) >= 0)
                    {
                        return true;
                    }
                    else
                    {
                        return false;
                    }
                });
            }

            arrayresult = [].slice.call(result).sort(self.activeSort());

            return arrayresult;

        });

    };


    ko.applyBindings(new viewModel);

Answer 1

请看这里：http://jsfiddle.net/ud3o79ag/6/

您必须使用函数设置一个observable，所以请使用：

header.active(true);

而不是：

header.active = true;

顺便说一下，我添加了一个＆＃34; X＆＃34;到你的指标，你可以真正看到它。

使用Knockout更改Observable后，可见绑定未更新

1 个答案: