使用Knockout进行Observable更改后可见绑定不会更新

Question

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

必须使用的功能设置可观察到的，所以在使用这个：

header.active(true); 

，而不是这样的：

header.active = true; 

顺便说一句我增加了一个“X”你的指示，所以你可以看到它。