Ember.js 基于此.store.find（）设置控制器属性的余烬方法

我正在设置一个页面，我的用户可以在其中添加一个

orgLanguage

，如果这是第一个添加的

orgLanguage

，我想显示一条特殊消息。我可以让我的代码工作，但它看起来确实很难看，我想知道是否有更好的方法来处理这个问题

首先，这是我的Handelbars模板：

把手模板（简化）：

{{#if isFirstOrgLanguage}}
...display some content
{{/if}}

export default  Ember.ObjectController.extend({

    isFirstOrgLanguage: function() {
        // the 'orgLanguages' controller property is set in the route
        var orgLanguagesPromiseArray = this.get('orgLanguages');

        return orgLanguagesPromiseArray.then( function() {
            var orgLanguagesRecordArray = orgLanguagesPromiseArray.get('content');
            var orgLanguagesArray = orgLanguagesRecordArray.get('content');
            return orgLanguagesArray ? orgLanguagesArray.length === 1 : true;
        });
    }.property('orgLanguages')

}

setupController: function (controller, model) {
    this._super(controller, model);
    controller.set('orgLanguages', this.store.find('org-language') );
},

export default Ember.View.extend({

    didInsertElement: function() {
        this.get('controller').get('isFirstOrgLanguage').then( function( isFirstOrgLanguage ) {
            console.log('isFirstOrgLanguage', isFirstOrgLanguage);
        });
    }

});

...
afterModel: function() {
  var _this = this;

  Ember.RSVP.hash({
      languages: this.store.find('language'),
      orgLanguages: this.store.find('org-language')
  }).then( function( hash ) {
      _this.set('controller.languages', hash.languages );
      _this.set('controller.orgLanguages', hash.orgLanguages );
  });
},
...

该变量在我的控制器上定义如下

控制器（简化）：

{{#if isFirstOrgLanguage}}
...display some content
{{/if}}

export default  Ember.ObjectController.extend({

    isFirstOrgLanguage: function() {
        // the 'orgLanguages' controller property is set in the route
        var orgLanguagesPromiseArray = this.get('orgLanguages');

        return orgLanguagesPromiseArray.then( function() {
            var orgLanguagesRecordArray = orgLanguagesPromiseArray.get('content');
            var orgLanguagesArray = orgLanguagesRecordArray.get('content');
            return orgLanguagesArray ? orgLanguagesArray.length === 1 : true;
        });
    }.property('orgLanguages')

}

setupController: function (controller, model) {
    this._super(controller, model);
    controller.set('orgLanguages', this.store.find('org-language') );
},

export default Ember.View.extend({

    didInsertElement: function() {
        this.get('controller').get('isFirstOrgLanguage').then( function( isFirstOrgLanguage ) {
            console.log('isFirstOrgLanguage', isFirstOrgLanguage);
        });
    }

});

...
afterModel: function() {
  var _this = this;

  Ember.RSVP.hash({
      languages: this.store.find('language'),
      orgLanguages: this.store.find('org-language')
  }).then( function( hash ) {
      _this.set('controller.languages', hash.languages );
      _this.set('controller.orgLanguages', hash.orgLanguages );
  });
},
...

我将变量命名为我接收的数据类型。您将注意到，这是一个计算属性，它依赖于在我的路由上设置的控制器属性，如下所示

路线（简化）：

{{#if isFirstOrgLanguage}}
...display some content
{{/if}}

export default  Ember.ObjectController.extend({

    isFirstOrgLanguage: function() {
        // the 'orgLanguages' controller property is set in the route
        var orgLanguagesPromiseArray = this.get('orgLanguages');

        return orgLanguagesPromiseArray.then( function() {
            var orgLanguagesRecordArray = orgLanguagesPromiseArray.get('content');
            var orgLanguagesArray = orgLanguagesRecordArray.get('content');
            return orgLanguagesArray ? orgLanguagesArray.length === 1 : true;
        });
    }.property('orgLanguages')

}

setupController: function (controller, model) {
    this._super(controller, model);
    controller.set('orgLanguages', this.store.find('org-language') );
},

export default Ember.View.extend({

    didInsertElement: function() {
        this.get('controller').get('isFirstOrgLanguage').then( function( isFirstOrgLanguage ) {
            console.log('isFirstOrgLanguage', isFirstOrgLanguage);
        });
    }

});

...
afterModel: function() {
  var _this = this;

  Ember.RSVP.hash({
      languages: this.store.find('language'),
      orgLanguages: this.store.find('org-language')
  }).then( function( hash ) {
      _this.set('controller.languages', hash.languages );
      _this.set('controller.orgLanguages', hash.orgLanguages );
  });
},
...

最后，如果

isFirstOrgLanguage

为true，我想在这个Handlebar模板上调用一些基本的jQuery，所以我设置我的视图如下

查看：

{{#if isFirstOrgLanguage}}
...display some content
{{/if}}

export default  Ember.ObjectController.extend({

    isFirstOrgLanguage: function() {
        // the 'orgLanguages' controller property is set in the route
        var orgLanguagesPromiseArray = this.get('orgLanguages');

        return orgLanguagesPromiseArray.then( function() {
            var orgLanguagesRecordArray = orgLanguagesPromiseArray.get('content');
            var orgLanguagesArray = orgLanguagesRecordArray.get('content');
            return orgLanguagesArray ? orgLanguagesArray.length === 1 : true;
        });
    }.property('orgLanguages')

}

setupController: function (controller, model) {
    this._super(controller, model);
    controller.set('orgLanguages', this.store.find('org-language') );
},

export default Ember.View.extend({

    didInsertElement: function() {
        this.get('controller').get('isFirstOrgLanguage').then( function( isFirstOrgLanguage ) {
            console.log('isFirstOrgLanguage', isFirstOrgLanguage);
        });
    }

});

...
afterModel: function() {
  var _this = this;

  Ember.RSVP.hash({
      languages: this.store.find('language'),
      orgLanguages: this.store.find('org-language')
  }).then( function( hash ) {
      _this.set('controller.languages', hash.languages );
      _this.set('controller.orgLanguages', hash.orgLanguages );
  });
},
...

这似乎是一个疯狂的承诺和异步管理，只是为了回答“是否定义了1种语言”？尽管上述方法可行，但有没有更简单的方法，或者“余烬方法”来实现这一点

更新： 在做一些额外的研究时，这似乎是一个争论的话题。以下是我在这方面看到的相关讨论。如果我确定了一个我喜欢的模式，我会把它作为一个答案发布，但我欢迎其他的建议

---

我想发布我最终是如何解决这个问题的

首先，很明显，对于这种模式，有推荐的解决方案，但没有“一种真正的方法”。看

我最后使用的是：

路线：

{{#if isFirstOrgLanguage}}
...display some content
{{/if}}

export default  Ember.ObjectController.extend({

    isFirstOrgLanguage: function() {
        // the 'orgLanguages' controller property is set in the route
        var orgLanguagesPromiseArray = this.get('orgLanguages');

        return orgLanguagesPromiseArray.then( function() {
            var orgLanguagesRecordArray = orgLanguagesPromiseArray.get('content');
            var orgLanguagesArray = orgLanguagesRecordArray.get('content');
            return orgLanguagesArray ? orgLanguagesArray.length === 1 : true;
        });
    }.property('orgLanguages')

}

setupController: function (controller, model) {
    this._super(controller, model);
    controller.set('orgLanguages', this.store.find('org-language') );
},

export default Ember.View.extend({

    didInsertElement: function() {
        this.get('controller').get('isFirstOrgLanguage').then( function( isFirstOrgLanguage ) {
            console.log('isFirstOrgLanguage', isFirstOrgLanguage);
        });
    }

});

...
afterModel: function() {
  var _this = this;

  Ember.RSVP.hash({
      languages: this.store.find('language'),
      orgLanguages: this.store.find('org-language')
  }).then( function( hash ) {
      _this.set('controller.languages', hash.languages );
      _this.set('controller.orgLanguages', hash.orgLanguages );
  });
},
...

这里的主要见解是：

这是在页面的模型加载后完成的。这可能有意义，也可能没有意义，这取决于您的上下文

有些人喜欢将每个模型包装在自己的控制器中，但我没有像那样清晰地映射到控制器，所以我直接设置这些属性值

通常，将计算属性设置为承诺是不好的做法，因此，如果必须处理承诺（使用

this.store.find（）

），那么最好在路由中解析承诺，然后传递“具体”属性。但请记住，当这些值最终解析时，模板将呈现这些值！因此，还有一些争论的余地

我认为，一般的外卖是，余烬是给你很多选择来完成这一点，有很多的可能性，使用取决于你的需要