把这个功能放在合适的地方？

Question

刚开始使用Ember.js，已经有一个愚蠢的问题了！我想封装一些功能(将被几个不同的路由调用)。我不太清楚该把它放在哪里。

“程序”应做以下工作：

1. 调用外部服务(目前是WP，但将来可能是一个数据库)来获取一些数据。
2. 如果数据是JSON对象的数组，则提取第一个对象。
3. 对对象执行一些文本格式设置，特别是对对象的HTML格式内容属性调用htmlSafe()。

到目前为止，我尝试过的是：

• 执行所有功能的助手。似乎你无法从帮助者那里得到一个承诺，所以这是行不通的。
• 执行数据检索的util (从路由的model()导入和调用)和执行数据格式化的助手。这行得通，但看上去很笨拙？
• 一个组件，它似乎没有一个进行AJAX调用的好地方。

这是一个绿地应用程序，所以我使用金丝雀为一些未来的打样。我不想因为这个原因使用三重卷曲。下面是中间(工作)选项的代码：

app/routes/tos.js:

import Ember from 'ember';
import wpJson from '../utils/wp-json';

export default Ember.Route.extend({
  model() {
    return wpJson('terms-of-use');
  }
});

app/utils/wp-json.js:

/* global Ember */
export default function wpJson(slug) {
  var url = `/wp-json/posts?type[]=page&filter[name]=${slug}`;
  return Ember.$.getJSON(url).then(data => {
    return data.shift();
  });
}

app/templates/tos.hbs:

{{html-safe model.content}}

app/helpers/html-safe.js:

import Ember from 'ember';

export function htmlSafe([html]) {
  return html.htmlSafe();
}

export default Ember.Helper.helper(htmlSafe);

在某种完美的世界里，app/routes/tos.js是空的，app/templates/tos.hbs看起来更像这样：

{{wp-foo-bar slug='terms-of-use'}}

提前感谢您的任何建议或反馈。

Answer 1

将所有逻辑放在组件本身中如何，如下所示：

//app/components/wp-foo-bar/component.js
import Ember from 'ember';

export default Ember.Component.extend({

  remoteData: null,

  loadingData: false,//maybe show spinner depending on this

  fetchRemoteData: function(slug){    
      var url = '/wp-json/posts?type[]=page&filter[name]='+slug;

      return new Ember.RSVP.Promise(function(resolve, reject){
        Ember.$.getJSON(url, function(data){
            resolve(data.shift());
        });
      });
  },

  didInsertElement: function(){
    var slug = this.get('slug');
    this.set('loadingData', true);
    this.fetchRemoteData(slug).then(function(data){
        this.set('remoteData', data);
        this.set('loadingData', false);            
    }.bind(this));
  }
});

组件的模板如下所示：

{{html-safe remoteData}}

Answer 2

这是我的最后解决方案，基于Deewandra的解决方案(我标记为“正确”)。主要的区别是ic-ajax的使用，在Freenode上的#emberjs中的人们出于各种原因强烈推荐使用它。我还删除了html-safe助手，并将htmlSafe()函数调用移到组件中。

唯一让我感到困惑的是，我已经看到了一些关于不从didInsertElement()钩子中设置属性的间歇性警告。我想，随着Ember.js 2.0的成熟，我将继续关注它，我对框架的理解也在不断提高。

app/components/wp-get-page.js:

import Ember from 'ember';
import ENV from '../config/environment';
import ajax from 'ic-ajax';

export default Ember.Component.extend({
  slug: null,
  isLoadingData: false,
  remoteData: null,

  didInsertElement() {
    const slug = this.get('slug');
    if (Ember.isEmpty(slug))
      throw new Error('slug not specified in wp-get-page call');

    this.set('isLoadingData', true);
    ajax(`${ENV.APP.WP_API_URL}/posts?type[]=page&filter[name]=${slug}`)
      .then(data => {
        if (Ember.isEmpty(data))
          throw new Error('no data from wp-json');

        if (Ember.isArray(data) && data.length === 1)
          data = data.shift();

        this.set('remoteData', {
          title: data.title,
          content: data.content.htmlSafe()
        });
      })
      .catch(() => {
        this.set('remoteData', {
          title: 'Sorry',
          content: 'Unable to retrieve page contents! Please try again later.'
        });
      })
      .finally(() => {
        this.set('isLoadingData', false);
      });
  }
});