dimanche 12 avril 2015

Rendering model via nested templates in Ember

I'm building an app with multiple todo lists. The todo list used to correctly show todo model.


But I added function() to stack router to wrap todos router (so that it would correctly render todos template in stack template).


Then todos/index template (which is rendered through the outlet in todos) stopped displaying todo model.


This is my router structure:



Todos.Router.map(function() {
this.resource('stacks', {path: '/stacks'});
this.resource('stack', {path: '/stacks/:stack_id'}, function () {

this.resource('todos', { path: '/todos/:todos_id' }, function () {
// additional child routes will go here later
this.route('active');
this.route('completed');
this.route('new');

});
this.resource('todo', { path: 'todo/:todo_id' });

});
});


Stack template which renders Todo template:



<script type="text/x-handlebars" data-template-name="stack">
<h1>
<label {{action "editStack" on="doubleClick"}}>{{stackTitle}}</label>

{{input
value=stackTitle
action="createStack"}}

<div>{{model.stackTitle}}</div>

</h1>

{{render 'todos' todo}}

</div>
</script>


Then this todo template has an outlet for todo/index:



<script type="text/x-handlebars" data-template-name="todos">
<div class="container-fluid">

<section id="main">
{{outlet 'todos/index'}}
{{outlet modal}}
{{input type="checkbox" id="toggle-all" checked=allAreDone}}
</section>

</div>

</script>


And todo/index template:



<script type="text/x-handlebars" data-template-name="todos/index">
<ul id="todo-list">
<li {{bind-attr class="todo.isCompleted:completed todo.isEditing:editing"}}>
{{#each todo in model itemController="todo"}}

{{#if todo.isEditing}}
{{edit-todo class="edit" value=todo.title focus-out="acceptChanges"
insert-newline="acceptChanges"}}

{{else}}
{{input type="checkbox" checked=todo.isCompleted class="toggle"}}
{{outlet}}
<button {{action 'openModal' 'modal' model}}>
<label {{action "editTodo" on="doubleClick"}}>{{todo.title}}</label>
</button>

{{/if}}
</li>
{{/each}}
</ul>

</script>


Routers:



Todos.TodosRoute = Ember.Route.extend({
model: function() {
return this.store.find('todo');
},

});

Todos.TodosIndexRoute = Ember.Route.extend({
model: function() {
return this.modelFor('todos');
},
});


I've tried using {{partial}} helper in case that was a problem, but it didn't seem to change much.


Maybe I'm missing something in todos/index router that I need to call data through nested templates?


I appreciate your help!





Aucun commentaire:

Enregistrer un commentaire