Html 引导粘贴无法处理aurelia中的数据属性

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

我的发言如下：

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

HTML

---

这最终导致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);
})

---

你能提供一个结果“混乱”页面的屏幕截图吗？我的猜测是，由于元素现在有一个固定的位置，它在它的容器（用来帮助它定义大小）的正常流之外。所以当位置固定时（粘贴），您可能必须在css中的大小和位置方面非常具体。此时，我认为我有两个单独的问题。左侧的“程序”是col-md-2。右侧的部分是另一个col-md-10（我没有在上面的代码中添加）。问题1）在应用程序中的元素上添加“data spy=”词缀“”没有任何作用，它不会改变显示器上的任何东西。bootstrap.js正在加载（$.fn.affix显示在控制台中）。CSS表也正在加载。如果我添加它，它似乎会粘贴col-md-2井，但会产生问题2），即显示问题（）。

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

.affix-top {
  width: 25%;
}

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

  $('[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);
})