Question

我的网站有一个模板：

<script type="text/x-handlebars">
mainsite 
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="mainpage"> 
    mainpage
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="subpage"> 
    subpage
</script>

{{#linkTo 'mainpage.subpage'}}{{/linkTo}}

所以我想要实现的是那个人类型地址/主页它会看到“mainsite主页”，当他输入/ mainpage / subpage时，他会看到“mainsite主页子页面”。

所以基本上我想把一个子页面放到主页模板中，然后将其合并到主模板中（这是上面列表中的第一个）。

我试过了：

this.resource('mainpage', function() {
    this.route('subpage', { path: '/subpage' });
  });

但是，如果我点击linkTo地址创建的链接设置为mainpage / subpage（所以这没关系），但我看到“mainsite主页”但没有看到“mainsite主页子页面”。

我做错了什么？如何解决？

Answer 1

我刚刚编写了一个关于路由和呈现视图的教程来回答这个问题：http://matthewlehner.net/ember-js-routing-and-views/

但是，要更具体地说明这个问题，此处的问题是定义route与resource。有两种方法可以快速解决您的问题：

更改路线类型

this.resource('mainpage', function() {
  this.resource('subpage', { path: '/subpage' });
});

更改模板名称

data-template-name="mainpage/subpage"

这种情况正在发生，因为向资源添加“子页面”路由会向此资源添加另一个操作。在原始情况下，它会查找data-template-name="mainpage/subpage"。

考虑这两条路线'users / new'和'users / 1 / comments'之间的区别 - 第一条应该为用户呈现新动作，但第二条是您假设会显示的嵌套资源来自特定用户的评论。使用Ember，你可以按如下方式制作这两条不同的路线：

this.resource('users', function () {
  this.route('new'); #renders the 'users/new' template
  this.resource('comments'); #renders the 'comments' template
});

作为额外的奖励，路线名称应该正常工作。至少从1.0rc6开始。

如何在Ember.js中创建一个子页面？

1 个答案: