Bootstrap词缀不支持aurelia中的数据属性

Question

这似乎是一个非常普遍的问题，因为大约有10篇关于Bootstrap词缀不起作用的帖子。不幸的是，这些解决方案似乎都不起作用。文档声明使用数据属性简单地将“data-spy”属性应用于任何元素，然后将.affix .affix-top和.affix-bottom添加到css。这样做，实际上什么也没发生。网页作为词缀就不存在了。我知道CSS文件就在那里，因为我刚刚将.bg-pink添加到其中一个div中，它变成了粉红色。如果我在其中一个div中将“affix”放在我的类中，它将锁定该元素，但它会完全破坏任何容器格式。 Aurelia可能在背景中对js做任何有趣的事吗？我可以让它独立工作，但不在aurelia应用程序中。

我关注的文档：http://getbootstrap.com/javascript/#affix

以下是我期望它的工作方式，但显然HTML不喜欢它。

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <!-- selection menu bar -->
            <div class="well well-lg"  data-spy="affix" data-offset-top="60" data-offset-bottom="200">
               <!-- My content that should be locked -->
               <label>Program</label>
            </div>
       </div>
    </div> 
<div>

CSS

.affix {
  top: 1;
  width: 25%;
}

.affix-top {
  width: 25%;
}

.affix-bottom {
  width: 25%;
  position: fixed;
}

Answer 1

Aurelia（任何带有模板引擎的SPA）处理jQuery的方式最终出现了问题。有人向我解释说

  

“通常，当您加载插件时，它会等待文档   加载，然后使用选择器查找所有标记。没有   Aurelia中的document.onload，因为它是基于模板的“

放入页面的attached（）方法似乎可以使词缀开始在页面上工作。此代码取自bootstrap.js文件（从3.3.6开始非常底部。

  $('[data-spy="affix"]').each(function () {
  var $spy = $(this)
  var data = $spy.data()

  data.offset = data.offset || {}

  if (data.offsetBottom != null) data.offset.bottom = data.offsetBottom
  if (data.offsetTop    != null) data.offset.top    = data.offsetTop

  $spy.affix(data);
})