javascript - 卡住标题不允许点击 knockout

Question

我有以下 html 片段

<table class="table table-striped" style="background-color:white!important" data-bind="visible:!loading(),fixedHeader:loading">
  <thead >
    <tr>
      <th data-bind="click:sortSurname">Surname
        <!-- ko if:whatToSort() == 'surname'-->
          <i class="fa fa-caret-up" data-bind="visible:ascending"></i>
          <i class="fa fa-caret-down" data-bind="visible:!ascending()"></i>
        <!-- /ko -->
        <!-- ko ifnot:whatToSort() == 'surname'-->
          <i class="fa fa-sort fa-pos-conf" ></i>
        <!-- /ko -->
      </th>
      <th data-bind="click:sortName">Name
        <!-- ko if:whatToSort() == 'name'-->
          <i class="fa fa-caret-up" data-bind="visible:ascending"></i>
          <i class="fa fa-caret-down" data-bind="visible:!ascending()"></i>
        <!-- /ko -->
        <!-- ko ifnot:whatToSort() == 'name'-->
          <i class="fa fa-sort fa-pos-conf" ></i>
        <!-- /ko -->
      </th>
      <th data-bind="click:sortTitle">Business Title
        <!-- ko if:whatToSort() == 'title'-->
          <i class="fa fa-caret-up" data-bind="visible:ascending"></i>
          <i class="fa fa-caret-down" data-bind="visible:!ascending()"></i>
        <!-- /ko -->
        <!-- ko ifnot:whatToSort() == 'title'-->
          <i class="fa fa-sort fa-pos-conf" ></i>
        <!-- /ko -->
      </th>
      <th data-bind="click:sortOrganization">Organization
        <!-- ko if:whatToSort() == 'organization'-->
          <i class="fa fa-caret-up" data-bind="visible:ascending"></i>
          <i class="fa fa-caret-down" data-bind="visible:!ascending()"></i>
        <!-- /ko -->
        <!-- ko ifnot:whatToSort() == 'organization'-->
          <i class="fa fa-sort fa-pos-conf" ></i>
        <!-- /ko -->
      </th>
    </tr>
  </thead>
  <tbody data-bind="foreach:sorteddata">
    <tr>
      <td><span data-bind="text:surname"></span></td>
      <td><span data-bind="text:name"></span></td>
      <td><span data-bind="text:title"></span></td>
      <td><span data-bind="text:organization"></span></td>
    </tr>
  </tbody>
</table>  

以及以下 View 模型:

function CompanyViewModel()
{
  var list=this;
  list.data=ko.observableArray([
                                    new BusinessMen({id:1,name:"john",surname:"doe",title:"Harem Maker",organization:"Harem Ltd"}),
                                    new BusinessMen({id:2,name:"Alan",surname:"doe",title:"CEO",organization:"Harem Ltd"}),
                                    new BusinessMen({id:1,name:"miss",surname:"piggy",title:"Piug Manager",organization:"Pig Ltd"}),
                                    ....
                                    new BusinessMen({id:1,name:"Bill",surname:"Gates",title:"MIcrosoft's Former CEO",organization:"Microsoft Inc"}),
                                  ]);
  list.whatToSort=ko.observable('surname'); //Tell with what to sort the table
  list.ascending=ko.observable(false); //Tell the order to sort
  /**
  *Callback for sorting
  */
  var sortFunc=function(a,b)
  {
    switch(list.whatToSort())
    {
      case 'name':
      a=a.name;
      b=b.name;
      break;
      case 'title':
      a=a.title;
      b=b.title;
      break;
      case 'organization':
      a=a.organization;
      b=b.organization;
      break;
      case 'surname':
      default:
      a=a.surname;
      b=b.surname;
    }

    if(!list.ascending())//Swap if desceding
    {
      var temp=b;
      b=a;
      a=temp;
    }

    if(typeof a ==='undefined' || typeof b === 'undefined') return 0;
    return ( ( a() == b() ) ? 0 : ( ( a() > b() ) ? 1 : -1 ) );
  };

  list.sortSurname=function()
  {
    list.whatToSort('surname');
    list.ascending(!list.ascending());
  };

  list.sortName=function()
  {
    list.whatToSort('name');
    list.ascending(!list.ascending());
  }
  list.sortOrganization=function()
  {
    list.whatToSort('organization');
    list.ascending(!list.ascending());
  }

  list.sortTitle=function()
  {
    list.whatToSort('title');
    list.ascending(!list.ascending());
  }

  /**
  *Sorted Data depending what we select
  */
  list.sorteddata=ko.pureComputed(function()
  {
    return list.data().sort(sortFunc);
  });

  function BusinessMen(data)
  {
    var buinessman=this;
    data.id=parseInt(data.id);
    data.name=ko.observable(data.name);
    data.surname=ko.observable(data.surname);
    data.title=ko.observable(data.title);
    data.organization=ko.observable(data.organization);
  }
}

最后是绑定(bind)处理程序:

ko.bindingHandlers.fixedHeader={
    update:function(element, valueAccessor, allBindings, viewModel, bindingContext)
    {
     $(element).freezeHeader({offset : '50px'});
    }
};

上面的代码使用 freezeheader.js ( https://laertejjunior.github.io/freezeheader/ ) 和 knockout.js 在表格顶部显示固定标题。

问题是，当我向下滚动并显示“卡住”标题时，我无法对数据进行排序，特别是当我单击标题选择排序键时，不会执行任何项目，我不知道为什么会这样发生。

也许请提供一些帮助；

Answer 1

Freezeheader 库使用数据绑定(bind) DOM 元素的克隆在视口(viewport)顶部显示粘性标题。它将这个克隆附加到 DOM 的方式是:

tabela.append('<thead>' + obj.header.html() + '</thead>');

( source (line 107) )

克隆的 HTML 元素可能看起来与其原始元素相似，但它会丢失与事件监听器的所有连接，或者在您的情况下，会丢失与 knockout 数据绑定(bind)上下文的连接。

jQuery 的 clone 方法有一个选项，让您不仅可以复制原始 HTML，还可以复制附加到它的任何事件监听器。通过传递 true 参数来使用它:element.clone(true) 为您提供一个带有复制的事件监听器的副本。 (source)

您不是第一个遇到此问题的 Freezeheader 用户。 Github用户Shafranov发布a pull request用 jQuery 的 clone(true) 方法替换下面显示的代码行。

在进行此更改之前，请确保您没有破坏任何其他数据绑定(bind)。虽然 jQuery 可能会为您复制点击监听器，但它可能无法启用 knockout 功能以从一个 View 模型更新 DOM 中两个位置的文本或值。