hbsファイル間でパラメータを渡す方法

Question

ember.jsを使用してアプリケーションを作成しました。 ここで私は、task.hbsからsubtasks.hbs.howに渡されたパラメータ値を取得できませんでした。私は、subtasks.hbsのtasks.hbsから渡されたパラメータ値を取得し、subtasks.hbsにそれを表示できますか？

APP /テンプレート/ tasks.hbs：

{{outlet}} 
<h1>Tasks</h1> 
{{#each model as |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 /テンプレート/ subtasks.hbs：

{{outlet}} 
<h1>SubTasks</h1> 
<h2>{{task_id}}</h2> 
{{#each model as |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 /ルート/ tasks.js：

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model(){ 
     return this.store.findAll('task'); 
    } 
}); 

アプリ/routes/subtasks.js：

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model(){ 
     return this.store.findAll('subtask'); 
    } 
}); 

router.js：

import Ember from 'ember'; 
import config from './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; 

Answer 1

あなたは既にサブタスクのための動的セグメントとしてtask_idを定義しました。したがって、サブタスクのモデルフックの引数paramsから抽出する必要があります。モデルフックからtask_idを返してください。

import Ember from 'ember'; 

const { 
    RSVP 
} = Ember; 

export default Ember.Route.extend({ 
    model(params){ 
     return RSVP.hash({ 
      subtasks: this.store.findAll('subtask'), 
      taskId: params.taskId 
     }); 
    } 
}); 

この後、あなたはこのようにsubtask.hbsでそれにアクセスすることができます。

{{model.taskId}} 

• Ember guides about dynamic segment
• route model hook API