ember.js - how to pass parameters between hbs files in ember -
i have created application using ember.js. here couldn't parameter value passed tasks.hbs subtasks.hbs.how parameter value passed tasks.hbs in subtasks.hbs , print in subtasks.hbs?
app/templates/tasks.hbs:
{{outlet}} <h1>tasks</h1> {{#each model |task|}} <div class="well"> <h4>{{#link-to 'tasks.edit' task.id}}{{task.title}}{{/link-to}}</h4> <small>created: {{format-date task.created}}</small><br> <small>due: {{format-date task.date}}</small> <h5>priority: {{task.priority}}</h5> <p>{{task.description}}</p> <button {{action 'deletetask' task.id}} class="btn btn-danger">delete</button><hr> {{#link-to 'subtasks.subnew' task.id}}<button class="btn btn-primary">create subtask</button>{{/link-to}} {{#link-to 'subtasks' task.id}}<button class="btn btn-primary">show subtasks</button>{{/link-to}} </div> {{/each}} app/templates/subtasks.hbs:
{{outlet}} <h1>subtasks</h1> <h2>{{task_id}}</h2> {{#each model |subtask|}} <h1>{{subtask.id}}</h1> {{#if model.id subtask.tno}} <div class="well"> <h4>{{#link-to 'subtasks.subedit' subtask.id}}{{subtask.subtitle}}{{/link-to}}</h4> <small>created: {{format-date subtask.subcreated}}</small><br> <small>due: {{format-date subtask.subdate}}</small> <h5>priority: {{subtask.subpriority}}</h5> <p>{{subtask.subdescription}}</p> <button {{action 'deletesubtask' subtask.id}} class="btn btn-danger">delete</button> </div> {{/if}} {{/each}} app/routes/tasks.js:
import ember 'ember'; export default ember.route.extend({ model(){ return this.store.findall('task'); } }); app/routes/subtasks.js:
import ember 'ember'; export default ember.route.extend({ model(){ return this.store.findall('subtask'); } }); router.js:
import ember 'ember'; import config './config/environment'; const router = ember.router.extend({ location: config.locationtype, rooturl: config.rooturl }); router.map(function() { this.resource('tasks', function() { this.route('new'); this.route('edit', {path: '/edit/:task_id'}); }); this.route('subtasks', {path: '/subtasks/:task_id'}, function() { this.route('subnew', {path: '/subnew/:task_id'}); this.route('subedit', {path: '/subedit/:subtask_id'}); }); }); export default router;
you defined task_id dynamic segment subtask. need extract params argument in subtask's model hook. , return task_id model hook.
import ember 'ember'; const { rsvp } = ember; export default ember.route.extend({ model(params){ return rsvp.hash({ subtasks: this.store.findall('subtask'), taskid: params.taskid }); } }); after this, can access in subtask.hbs this:
{{model.taskid}} 
Comments
Post a Comment