具有不同页面格式的aurelia页面

时间:2016-06-13 07:40:10

标签: templates aurelia

在Aurelia SPA模板中,它假定每个页面都在app.html内,并在顶部使用相同的导航栏。但我会有很多页面不希望导航栏位于顶部,实际上根本不使用app.html。我正在查看main.js,看起来我可以挂钩到bootstrap()并更改某些页面的aurelia.setRoot()(我只是在这里猜测),但后来我开始破坏main.js文件,它不久就会变得非常混乱和维护头痛。我真的只想让一些页面完全使用他们自己的格式并忽略app.html格式而不做任何疯狂的配置。

我最初的想法是app.html应该只是一个空文件,并让每个页面决定它是否需要导航栏并将其包含在各个页面上。但现在我在许多页面上复制代码,如果标准页面布局发生变化,我必须更改所有单独的页面。不确定最好的方式去做他的。有什么建议吗?

2 个答案:

答案 0 :(得分:1)

我实际上不同意吉尔伯特的回答。使用.setRoot是最佳做法; root只是父视图/ viewModel对,你经常会有不同的父对象。这基本上是您在创建空应用程序视图/ viewModel时所做的事情,创建一个不执行任何操作的新父项。但是添加一个不必要的未使用层只会带来额外的复杂性。

最好的用例之一是登录页面。登录页面与普通应用程序页面完全不同 - 有登录提示,没有导航栏等。因此,创建一个“登录”应用程序根目录和“应用程序”应用程序根目录,并在它们之间来回切换。我已经构建了一个名为Sentry的模板,演示了如何执行此操作。

Sentry in action

Sentry on GitHub

答案 1 :(得分:0)

使用set root,就像你说的,是个坏主意。与您所说的类似,您可以使app.html仅包含路由器视图标记。您想要共享类似页面布局的应用程序的不同部分将在不同的路径下进行处理。现在,每个这些路由将指向另一个在视图中具有不同样式的路由器

只需将其视为一个空的app.html,其子app.html中包含样式(例如,不同的导航栏,页面布局等)