向 table 添加水平顶部滚动条的 Aurelia 方法？

Question

我尝试在我的模板标签内（或外）嵌入一个小脚本，但没有成功。该脚本永远不会执行。

就我而言，我希望执行此脚本：

<script type="text/javascript">
    function DoubleScroll(element) {
        var scrollbar= document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow= 'auto';
        scrollbar.style.overflowY= 'hidden';
        scrollbar.firstChild.style.width= element.scrollWidth+'px';
        scrollbar.firstChild.style.paddingTop= '1px';
        scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
        scrollbar.onscroll= function() {
            element.scrollLeft= scrollbar.scrollLeft;
        };
        element.onscroll= function() {
            scrollbar.scrollLeft= element.scrollLeft;
        };
        element.parentNode.insertBefore(scrollbar, element);
    }

    DoubleScroll(document.getElementById('doublescroll'));
</script>

来自 How can I get horizontal scrollbars at top and bottom of a div?，在我的 table 顶部添加水平滚动条。

<div class="table-responsive">
    <table class="table table-bordered table-striped">
        // ... a ton of rows
    </table>
</div>

或者什么可能更好（aurelia 方法）？有什么想法吗？

这是我的想象，但我似乎无法理解最后的部分，我什至不知道这是否是正确的思考方式。

添加具有 ref 属性的虚拟元素
在 Aurelia 的视图控制器中创建附加函数
以某种方式将样式添加到 ref 获取的元素中。[yourref]

或者您是否可以避免在模板中放置一个虚拟 div 而实际上是上面的脚本所做的，即动态添加它。同一视图中还存在多个 table，因此必须使用 ref 可能不是最好的方法：/

任何进一步的想法将不胜感激。制作水平顶部滚动条应该相当容易吧？ :-)

http://plnkr.co/edit/N9dRxG?p=info

Answer 1

为此创建自定义属性 - 这是一个示例：

双scroll.js

import {inject} from 'aurelia-framework';

@inject(Element)
export class DoubleScrollCustomAttribute {
  constructor(element) {
    this.element = element; // this is the element the double-scroll attribute appears on.
  }

  attached() {
    let element = this.element;
    // contents of your DoubleScroll function from your original post
  }

  detached() {
    let element = this.element;
    // optional:  tear-down double scroll (unsubscribe events, etc)
  }
}

然后将您的标记更改为：

app.html

<require from="./double-scroll"></require>

<div class="table-responsive">
    <table class="table table-bordered table-striped" double-scroll>
        // ...
    </table>
</div>

（自定义属性 class 导出为 DoubleScrollCustomAttribute...aurelia 去除 CustomAttribute 并用连字符连接名称，从而生成您在table 上面的元素。

工作 plunker：http://plnkr.co/edit/SYHXBO?p=preview

有关自定义属性的更多信息，请查看 http://aurelia.io

上的文档

向 table 添加水平顶部滚动条的 Aurelia 方法？

The Aurelia way of adding a horizontal top scrollbar to a table?

javascript

aurelia