I am obviously messing up something here, but I have a child route called 'details' that I want to render. However I keep getting error messages that 'details' does not exist.
Here's my router map:
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
export default Router.map(function() {
this.resource('lists', {path: '/'}, function() {
this.route('show', {path: 'lists/:list_id'} );
});
this.route('todo', {path: 'todos/:todo_id'}, function() {
this.route('details');
} );
});
The link to details route:
<div class="row">
{{!div class="col-xs-12 col-xs-offset-5"}}
{{!task list}}
<ul class="list-group">
{{#each todo in model.todos itemController="todo"}}
{{#link-to "todo.details" todo}}
<li class="list-group-item">
....
todo/details.hbs:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<div class="container-fluid">
<div class="row">
<h3>{{todo.model.title}}</h3>
</div>
<div class="row">
<li>
<p>my name<small>timestamp</small></p>
<p class="bubble">yea</p>
</li>
</div>
{{outlet "comments"}}
</div>
todo/details.js:
export default Ember.Route.extend({
renderTemplate: function() {
this.render('comments', {
into: 'details',
outlet: 'comments'
});
}
});
todo.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params){
// return model
},
renderTemplate: function(controller) {
this.render('lists.show', {controller: controller});
// this.render('todos', {controller: 'todo'});
this.render('todos', {
into: 'lists.show',
outlet: 'todos',
});
I tried adding
this.render('todos.details', {
into: 'todos',
outlet: 'todos.details'
});
to todo.js, but it would not work.
If you could point me in the right direction I'd appreciate it.
Aucun commentaire:
Enregistrer un commentaire