javascript - 向表格添加水平顶部滚动条的 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? , 在我的表格顶部添加水平滚动条。

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

或者什么可能更好(aurelia 方法)？有什么想法吗？

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

1. 添加带有 ref 属性的虚拟元素
2. 在 Aurelia 的 View Controller 中创建一个附加函数
3. 以某种方式将样式添加到 ref 获取的元素中。[yourref]

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

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

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

Answer 1

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

double-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>

(自定义属性类导出为 DoubleScrollCustomAttribute...aurelia 去除了 CustomAttribute 并用连字符连接了导致 double-scroll 的名称您在上面的表格元素上看到的属性。

正在工作的 plunker:http://plnkr.co/edit/SYHXBO?p=preview

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