Ember.js重定向到模板

我有一个匹配列表，当我单击一个时，我想显示匹配。我知道我可以做一个Master-Detail风格的页面，当我点击一个页面时，我可以在同一页面上看到插口，但那不是我想要的。Ember.js重定向到模板

我想要它，所以当我点击一个链接时，它会进入一个全新的比赛页面。我不确定如何去做这件事。

这里是我的#/matches路线（在CoffeeScript中）

App.MatchesRoute = Ember.Route.extend(
    model: -> 
    App.Match.find() 
)

这里是我的matches.handlebars

<div id="matches"> 
    {{#each match in controller}} 
    {{#linkTo "match" match class="panel six columns"}} 
     Match between {{match.player.name}} and {{match.opponent.name}} 
    {{/linkTo}} 
    <br /> 
    {{/each}} 
</div> 

// I know that if I have this outlet, it will render `match.handlebars` 
// right here, but I want it to be it's own page. 
// {{outlet}}

我只与Ember工作了几天，所有的例子我发现使用Master-Detail视图。

请让我知道我可以从我的代码中提供的任何其他信息。

来源

2013-03-10 ardavis

<编辑日期= “2013年3月11日” >

我已经推了this repository in GitHub。这是一个概念性的应用程序，它使用renderTemplate这种方式有点像你所描述的。

< /编辑>

在你的孩子的路线，使用renderTemplate挂钩，以告诉应用程序来呈现特定的模板在特定{{outlet}}。例如：

Source Fiddle

App.Router.map(function() { 
    this.resource('matches', { path: 'matches' }, function() { 
     this.route('match', { path: 'match/:match_id' }); 
    }); 
}); 

App.MatchesRoute = Em.Route.extend({ 
    model: function() { 
     return App.Match.find(); 
    }, 
    setupController: function(controller, model) { 
     model = App.Match.find(); 
     controller.set('content', model); 
    }, 
    renderTemplate: function() { 
     this.render('matches', { 
      into: 'application' 
     }) 
    } 
}); 

App.MatchesMatchRoute = Em.Route.extend({ 
    model: function(params) { 
     return App.Match.find(params.match_id); 
    }, 
    setupController: function(controller, model) { 
     controller.set('content', model); 
    }, 
    renderTemplate: function() { 
     this.render('match', { 
      into: 'application' 
     }) 
    } 
});

这MatchesMatchRoute是设置以使它的模板（matches/match）插入application模板。而且由于只有一个{{outelet}}这个模板（见下文把手），我们没有指定任何东西：

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

<script type="text/x-handlebars" data-template-name="matches"> 
    <h2>Matches</h2> 
    <ul> 
    {{#each match in controller}} 
     <li> 
      {{#linkTo matches.match match}} 
       {{match.title}} 
      {{/linkTo}} 
     </li> 
    {{/each}} 
    </ul> 
</script> 

<script type="text/x-handlebars" data-template-name="match"> 
    <h3>{{title}}</h3> 
    <p>{{description}}</p> 
</script>

如果你有多个网点的情况下，你必须哈默尔他们，就像在车把如下：

<script type="text/x-handlebars"> 
    <h1>App</h1> 
    {{outlet main}}<br /> 
    {{outlet nested}} 
</script>

然后你的路线也必须指定插座。例如：

Source Fiddle

[...route code...] 
renderTemplate: function() { 

    this.render('content', { 
     into: 'application', 
     outlet: 'main' 
    }); 

    this.render('buttons', { 
     into: 'application', 
     outlet: 'nested' 
    }); 

} 
[...route code...]

来源

2013-03-11 03:42:04 MilkyWayJoe

非常感谢您的令人难以置信的详细的解答。今天晚上，当我有时间去研究它时，我会仔细研究一下。 :) – ardavis 2013-03-11 11:16:12

可以导致在模板中通过定义路由时，renderTemplate钩来渲染成不同的模板的插座（请参阅指南：http://emberjs.com/guides/routing/rendering-a-template/）

为了您例如，它可能是这样的：

App.MatchRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
    this.render({ into: 'matches' }); 
    } 
});

来源

2013-03-11 03:06:27 CraigTeegarden

Ember.js重定向到模板

回答

相关问题