Aurelia 和 UIkit scrollyspy答案

【问题标题】：Aurelia and UIkit scrollyspyAurelia 和 UIkit scrollyspy
【发布时间】：2015-09-29 05:21:13
【问题描述】：

我正在尝试将 UIkit scrollspy 与 aurelia 一起使用，但无法使其正常工作。我下载了skeleton-navigation并用jspm安装了uikit。在app.js 里面我有：

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

UIkit css 元素可以正常工作，但 scrollspy 不起作用。我的 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>

【问题讨论】：

我认为这是因为 aurelia 模板的 dom 是在加载 uikit 后渲染的。很像 ajax 请求，同样发生在 jquery 中，如果你将一些代码放在 onready 函数中，dom 将在 aurelia 模板之前加载，并且该函数将首先执行，而没有模板中的任何元素。可以使用 aurelia 类中的生命周期方法“激活”，但它是一个样板，我正在寻找适应它的方法

标签： uikit aurelia getuikit

【解决方案1】：

您好，我找到了一个简单的方法。

只需在一个静态容器中添加 data-uk-observe 属性。我把它放在我的 index.html 的 body 标记中，因为在 aurelia 应用程序中是唯一静态的东西 :-)

这样 UIKit 会观察 dom 的变化，当模板被渲染时，它会递归搜索新的组件

我不确定性能问题，但到目前为止还不错。

例子：

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

【讨论】：