在使用 Knockout 进行可观察更改后，可见绑定未更新

Question

我正在使用 Knockout 创建一个可排序的表。表格绑定、排序功能和过滤工作正常。但是，我想在特定列处于活动状态时显示一个排序图标。
由于 span 已绑定到 header 数组中的可见属性，并且此属性是可观察的，因此当此值更改时（在排序函数中），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;

顺便说一句，我在您的指标中添加了一个“X”，因此您可以实际看到它。