mardi 28 avril 2015

Child route not rendering on Ember

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