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>

从如何在div的顶部和底部获得水平滚动条？,在我的表格顶部添加一个水平滚动条.

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

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

这是我的想象,但我似乎无法弄清楚最后的部分,我甚至不知道这是否是正确的思考方式.

1. 添加带有ref属性的虚拟元素
2. 在Aurelia的视图控制器中创建一个附加功能
3. 以某种方式将样式添加到ref提取的元素中.[yourref]

或者你可以避免在模板中放置一个虚拟div,实际上是上面的脚本所做的,这是动态添加它.同一个视图中也存在多个表,因此必须使用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>

(自定义属性类被导出为DoubleScrollCustomAttribute... aurelia剥离CustomAttribute并连接名称,从而产生double-scroll您在上面的表元素上看到的属性.

工作人员:http://plnkr.co/edit/SYHXBO？p = preview

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