Aurelia的{wrap} bootstrap导航栏不能正常工作

我发现了我的问题，我似乎无法解决它。我从{wrap} bootstrap获得了一个主题，因为我是没有人的平面设计师，并且开始在Aurelia中根据导航框架将它们拼凑在一起。Aurelia的{wrap} bootstrap导航栏不能正常工作

我的问题是导航栏。使用骨架，路由配置在app.js - 罚款，没有问题 - 然后一个使用

<require from="nav-bar.html"></require>

到导航栏猛拉到一个人的页面。这是对CSS的变形，因为，正如F12通知我的，在发射的HTML中添加了一个新元素作为导航栏组件的容器。在这种情况下，它是

<nav-bar class="au-target" router.bind="router" au-target-id="1"> 
<!-- usual bootstrap navbar stuff --> 
</nav-bar>

我该如何解决这个问题？

来源

2017-01-06 Rich Bryant

你的解决方案是一个无容器视图。在Aurelia文档中搜索“无容器”一词。 – LStarky

你绝对是正确的，@LStarky。请张贴这个答案，以便我可以给你一个解决方案的功劳。 –

此解决方案现已发布。如果你有任何进一步的困难，请不要犹豫，问。 – LStarky

使用Aurelia路上的@containerless装饰：

要做到这一点，你需要使用Aurelia路上的@containerless装饰。据我所知，你需要有一个完整的组件，而不仅仅是一个HTML视图。如果您还没有nav-bar.js，创建一个没什么大不了的。

例NAV-bar.js：

import {containerless} from 'aurelia-framework'; 

@containerless 
export class NavBar { 
}

用法：

首先，您需要在父视图中查看nav-bar，像这样。确保不指定.html，因为你希望它看起来的视图模型也：

<require from="nav-bar"></require>

然后，在正确的位置，你的看法进一步下降，使用元素标签包含它。使用Compose元

<nav-bar></nav-bar>

另一种方法：

我从未使用过这一点，但它也可能是一个不错的办法。根据Dwayne Charrington的this blog article，您也可以使用内置的Aurelia元素<compose>在无视图模型的情况下导入无容器视图和/或视图。它并没有明确说你可以做到这一点，所以我假设它会起作用。给它一个镜头，让我知道如果我需要更新这个答复职位。

<compose view="nav-bar.html" containerless></compose>

来源

2017-01-07 14:11:17 LStarky

Aurelia的{wrap} bootstrap导航栏不能正常工作

回答

相关问题