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

时间:2017-07-28 12:37:45

标签: ember.js ember-cli

我使用ember.js创建了一个应用程序。 在这里,我无法获取从tasks.hbs传递给subtasks.hbs的参数值。我可以从subtasks.hbs中的tasks.hbs传递参数值并将其打印在subtasks.hbs中吗?

应用程序/模板/ tasks.hbs:

OSArchitecture

应用程序/模板/ subtasks.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}}

应用程序/路由/ tasks.js:

{{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}}

应用程序/路由/ subtasks.js:

import Ember from 'ember';

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

router.js:

import Ember from 'ember';

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

1 个答案:

答案 0 :(得分:0)

您已将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}}