将迭代对象传递给控制器​​方法

时间:2014-03-08 02:14:25

标签: ember.js controller

当尝试将迭代对象传递给Controller方法时,该对象将作为String传递。

模板:

<script type="text/x-handlebars" data-template-name="gradebooks">
  {{#each}}
    {{#link-to "gradebook" this}}{{title}}{{/link-to}}
  {{/each}}
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="gradebook">
  <h1>Student Grades</h1>
  {{#each student in students}}
    {{#each assignment in assignments}}
      {{student.name}}, {{assignment.name}}: {{getGrade student assignment}}%
    {{/each}}
  {{/each}}
</script>

路线:

App.Router.map(function() {
  this.resource('gradebooks', function() {
    this.resource('gradebook', { path: ':gradebook_id' });
  })
});

App.GradebooksRoute = Ember.Route.extend({
  model: function() {
    return this.store.find(App.Gradebook);
  }
});

App.GradebookRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find(App.Gradebook, params.gradebook_id);
  }
});

控制器:

App.GradebookController = Ember.ObjectController.extend({
  getGrade: function(student, assignment) {
    console.log(student, assignment);
    return 5;
  }
});

型号:

App.Gradebook = DS.Model.extend({
  title: DS.attr('string'),
  students: DS.hasMany('student', { async: true}),
  assignments: DS.hasMany('assignment', { async: true})
});
App.Student = DS.Model.extend({
  name: DS.attr('string'),
  gradebook: DS.belongsTo('gradebook'),
  grades: DS.hasMany('grade', { async: true })
});
App.Assignment = DS.Model.extend({
  name: DS.attr('string'),
  gradebook: DS.belongsTo('gradebook'),
  grades: DS.hasMany('grade', { async: true })
});
App.Grade = DS.Model.extend({
  score: DS.attr('number'),
  student: DS.belongsTo('student'),
  assignment: DS.belongsTo('assignment')
});

目前,上面为每个学生输出字符串"student"。如果我有{{getGrade student.id}},它将输出字符串"student.id"。我怎么能让学生作为一个对象来传递?

1 个答案:

答案 0 :(得分:0)

鉴于您的修订,我已经修改了下面的答案,以便更好地协调:

App.AssignmentController = Ember.ObjectController.extend({
   needs: ["student"],
   getGrade: function() {
      var student = this.get('controllers.student');
      //logic to get grade
   }.property() //thing to observe for changes
});


<script type="text/x-handlebars" data-template-name="gradebooks">
  <h1>Student Grades</h1>
  {{#each}}
    {{#link-to "gradebook" this}}{{title}}{{/link-to}}
  {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="gradebook">
  {{#each student in students}}
     {{render 'student' student}}
  {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="student">
   {{name}} 
   {{#each assignment in assignments}}
     {{render 'assignment' assignment}}
   {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="assignment">
   {{name}}: {{getGrade}}%
</script>

一个有用的工具是{{log model}}或{{log record}}或{{log ... whatver ..}},以了解您的视图所接收的数据。

如果您打开Chrome Ember Inspector,您还应该看到哪些视图,控制器,路线,模型等已经定义,这有助于理解。

简而言之,你无法使用{{getGrade student.id}}将参数传递给控制器​​ - 你可以定义一个Handelbars助手来接受参数,但我不认为这就是你所追求的。上面的方法对我有用。

希望这有帮助