Ember.js中非资源路由的通用,继承布局

时间:2014-07-22 15:46:59

标签: javascript templates ember.js routes

我的应用程序的某些部分共享一个共同的布局。这些是非资源网址,例如:

/about
/signup
... and more

我正在尝试在这些与我的主应用程序模板不同的路径之间共享基本模板。大多数应用程序都位于/products下,因此products.hbs模板可用作基本模板。

我有工作......我只是不确定它是否符合Ember惯例,或者它是解决它的最佳方法。基本上,我有一个空的应用程序模板(只是一个插座),然后是一个要继承的自定义路由(routes/public-route.js),用于加载共享模板。

这就是我所拥有的:

模板/ application.hbs

{{outlet}}

模板/布局/ public.hbs

// this is the shared base template for routes not under `/products`
<div class="public">
  <h1>Share base template</h1>
  {{#link-to 'signup'}}Signup{{/link-to}}
  {{#link-to 'about'}}About{{/link-to}}
  {{outlet}}
</div>

模板/ products.hbs

<div class="splitview">
  <h1>Default app view</h1>
  {{#link-to 'products'}}Products{{/link-to}}
  {{#link-to 'products.featured'}}Featured{{/link-to}}
  {{outlet}}
</div

路由/公共route.js

App.PublicRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('layout/public');
    this.render({ into: 'layout/public' });
  }
});

路由/ about.js

App.AboutRoute = PublicRoute.extend();

路由/ signup.js

App.SignupRoute = PublicRoute.extend();

router.js

App.Router = Ember.Router.extend();
App.Router.map(function() {
  this.resource('products', function() {
    this.resource('featured', { path: '/featured' }, function() {});
  });
  this.route('about');
  this.route('signup');
});

这似乎有效。我可以转换为signupabout,并将其模板呈现在layout/public.hbs插座内。让你的application.hbs只是一个出口是不好的做法吗?有更好的方法吗?这似乎是一种常见的情况...

0 个答案:

没有答案