Question

在我的应用程序中，我有Course和TeamMember个模型，因此每个团队成员都可以负责多个课程：

FrontApp.TeamMember = DS.Model.extend({
  name:    DS.attr('string'),
  email:   DS.attr('string'),
  image:   DS.attr('string'),
  courses: DS.hasMany('course', {async: true})
});

FrontApp.Course = DS.Model.extend({
  title:       DS.attr('string'),
  ...
  bunch of other model-specific fields (no relations)
  ...
  ects:        DS.attr('number')
});

现在我想在个人资料页面上显示以下内容：

is responsible for COURSE_TITLE_1, COURSE_TITLE_2如果他负责＆lt; = 2门课程
is responsible for COURSE_TITLE_1, COURSE_TITLE_2, ...如果他负责＆gt; 2门课程

目前我正在尝试从itemController中执行此操作：

FrontApp.TeamMemberController = Ember.ObjectController.extend({
  responsibleForCourses: function(){
    var res = "";

    this.get('courses').then(function(loaded_courses){
        if ( loaded_courses.get('length') <= 2 ) {
            loaded_courses.forEach(function(course){
                res += course.get('title') + " | ";
            })
        } else {
            // access first two of loaded_courses here and add "..."
        } 
        console.log(res); // this thing works
    })

    return res; // but here it does not work
  }.property('courses')
});

由于model.courses是承诺，我必须使用.then()，但这会导致以下问题：如何返回res并将其显示在我的模板中？

顺便说一句，我的模板看起来像这样：

responsible for courses: {{responsibleForCourses}}

提前感谢您的帮助。

Answer 1

字符串在JavaScript中是不可变的，因此一旦返回空字符串""，您就无法在以后更改它。要解决此问题，您可以在解析promise时设置属性。

FrontApp.TeamMemberController = Ember.ObjectController.extend({
  responsibleForCourses: function(){
    var that = this;  
    this.get('courses').then(function(loaded_courses){
      var final_result = "";
      if ( loaded_courses.get('length') <= 2 ) {
        loaded_courses.forEach(function(course){
            final_result += course.get('title') + " | ";
        });          
      } else {
        // access first two of loaded_courses here and add "..."
      } 
      that.set('responsibleForCourses', final_result);
    });
    return ""; // return "" as a temporary value until the promise is resolved
  }.property('courses')
});

Answer 2

您应该在res回调中返回then：

FrontApp.TeamMemberController = Ember.ObjectController.extend({
  responsibleForCourses: function(){
    var res = "";
    return this.get('courses').then(function(loaded_courses){
      if ( loaded_courses.get('length') <= 2 ) {
        loaded_courses.forEach(function(course){
            res += course.get('title') + " | ";
        })
      } else {
        // access first two of loaded_courses here and add "..."
      }
      return res;
    })
  }.property('courses')
});

希望它有所帮助。

Answer 3

感谢您的回答，我以不同的方式解决了问题：

FrontApp.MyTeamController = Ember.ObjectController.extend({
  firstCourses: Ember.computed(function(){
    return this.get('courses').slice(0,2);
  ).property('courses.@each.title'),

  otherCourses: Ember.computed(function(){
    return this.get('courses').slice(2);
  }).property('courses.@each.title')
})

据我了解，问题出在.property('courses')而不是.property('courses.@each.title')

通过DS.hasMany迭代

3 个答案: