Search code examples
uikitaureliagetuikit

Aurelia and UIkit scrollyspy

I'm trying to use UIkit scrollspy together with aurelia but can't get it to work. I downloaded skeleton-navigation and installed uikit with jspm. Inside app.js I have:

import 'uikit';
import 'uikit/css/uikit.css!';

UIkit css elements work fine but scrollspy doesn't work. I have something like this inside my html:

<div class="uk-panel uk-panel-box uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-fade" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true, delay:1000}"> .... </div>
Solution

  • Hi I find a simple way.

    Just add data-uk-observe attribute in one static container. I put that in the body tag of my index.html, because in a aurelia app is the only static thing :-)

    That way UIKit will observe for dom changes and when the templates are rendered it will recursively search for new components

    I'm not sure of the performance issues, but so far so good.

    Example:

    <body aurelia-app="main" data-uk-observe>