如何在ember中的hbs文件之间传递参数答案

【问题标题】：how to pass parameters between hbs files in ember如何在ember中的hbs文件之间传递参数
【发布时间】：2017-07-28 12:37:45
【问题描述】：

我使用 ember.js 创建了一个应用程序。这里我无法获取从tasks.hbs传递到subtasks.hbs的参数值。如何获取subtasks.hbs中tasks.hbs传递的参数值并打印到subtasks.hbs中？

app/templates/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/templates/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/routes/tasks.js：

import Ember from 'ember';

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

app/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;

【问题讨论】：

标签： ember.js ember-cli

【解决方案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}}

【讨论】：