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 be?)? Есть идеи?

Вот как я себе представляю, но я не могу изобразить последние части, и я даже не знаю, правильно ли это думать об этом.

1. добавить фиктивный элемент с атрибутом реф
2. создать присоединять функцию внутри контроллера представления в Aurelia
3. каким-то образом добавить стили к элементу извлекалось исх как это. [Yourref]

Или вы могли бы избежать размещения в шаблоне dummy div и фактически того, что делает сценарий выше, который динамически добавляет его. Кроме того, в одном и том же представлении существует несколько таблиц, поэтому использование рефлекса, пожалуй, не самый лучший способ:/

Любые другие идеи были бы весьма полезны. Должно быть довольно легко сделать горизонтальную верхнюю полосу прокрутки вправо? :-)

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

Answer 1

создать пользовательский атрибут для this- вот пример:

двойного 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) 
    } 
} 

Затем измените разметку:

приложение.html

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

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

(класс пользовательского атрибута был экспортирован как DoubleScrollCustomAttribute ... Аурелия раздевает CustomAttribute и переносит название в результате double-scroll атрибут вы видите на элементе таблицы выше.

Работы plunker: http://plnkr.co/edit/SYHXBO?p=preview

Для получения дополнительной информации о пользовательских атрибутах проверить документы на http://aurelia.io