Question

什么是最好的JSON API架构，可以方便地使用Ember Data，移动SDK，...以及为什么知道每个页面可以有不同数量的翻译？

写入界面目前使用选项2）内联。

选项1）作为哈希

{
  pages: [
    {
      id: 1,
      title: {
        en: "Title",
        fr: "Titre"
        ...
      }
    }
  ]
}

选项2）内联

{
  pages: [
    {
      id: 1,
      title_en: "Title",
      title_fr: "Titre"
      ...
    }
  ]
}

Answer 1

要使用Ember Data并最好地利用其侧面加载功能，您需要保持数据结构的关系，如下所示

{
  pages: [
    {
      id: 1,
      title_ids: [1,3]
    },
    {
      id: 2,
      title_ids: [2,3]
    }
  ],
  titles: [
      {
        id: 1,
        en: "Title",
        fr: "Titre"
        ...
      },
      {
        id: 2,
        en: "Title",
        fr: "Titre"
        ...
      },
      {
        id: 3,
        en: "Title",
        fr: "Titre"
        ...
      },
  ]
}

Answer 2

如果您引用此JSON API，请使用this adapter。

如果你指的是一般的JSON API，那么我会说你提出的任何一个选项都很好，但只要想想你将如何在你的把手模板中呈现它。恕我直言，我会对选项＃1（哈希）略微扭曲。

而不是：

{
  pages: [
    {
      id: 1,
      title: {
        en: "Title",
        fr: "Titre"
        ...
      }
    }
  ]
}

我会这样做：

{
  pages: [
    {
      id: 1,
      translations: {
        en: {
            title: "Title"
        },
        fr: {
            title: "Titre"
        }
      }
    }
  ]
}

然后对于控制器你可以这样做：

App.PagesController = Ember.ArrayController.extend({

    currentLanguage: 'fr',

    translatedPages: function() {
        var translationKey = 'translations.'+this.get('currentLanguage');
        return this.get('model').map(function(page) {
            return {
                id: page.get('id'),
                content: page.get(translationKey);
            };
        });
    }.property('currentLanguage'),
});

在把手模板中，你可以这样做：

{{#each page in translatedPages}}
    {{#link-to page.id}}
        <p>{{page.content.title]}}</p>
    {{/link-to}}
{{/each}}

在设计返回的JSON的结构时，我的首要考虑因素是创造它是多么简单计算属性（在本例中为translatedPages），要显示在标准的Handlebars模板中，无需定义任何自定义Handlebars助手，或Ember Components。如果您有更复杂的要求，我会建议那些。但是，为此，可以采用简单的解决方案。

Answer 3

您是否需要在同一页面上同时显示多种语言？

如果您只是一次只用一种语言显示数据，那么将Accept-Language标题传递给后端并仅使用该语言获得响应可能是更合适的解决方案。

在我的特定情况下，我只使用了ajaxSetup，例如：

$.ajaxSetup({headers: {'Accept-Language': 'en_US'}});

返回类似

的内容

{
  pages: [
    {
      id: 1,
      title: "Title"
    }
  ]
}

如果我还需要知道哪些语言可用，我会提供语言参数。类似的东西：

{
  pages: [
    {
      id: 1,
      lang: ['en_US', 'fr_FR']
      title: "Title"
    }
  ]
}

Answer 4

ember-data-model-fragments似乎非常适合您的用例。

但我会尝试一种完全不同的解决方案。我会将模型分成两部分，例如： G。 post和post-translation。那么一个帖子就像这样：

{

  id: '1'
  type: 'post',
  relationships: {
    translations: [
      {id: '1', type: 'post-translation'},
      {id: '2', type: 'post-translation'}
    ]
  }
}

{
  id: '1'
  type: 'post-translation',
  relationships: {
    post: {id: '1', type: 'post'}
  },
  attributes: {
    lang: 'en',
    title: 'Hello world!',
    body: "Wonderful weather we have today, don't we?"
  }
}

{
  id: '2'
  type: 'post-translation',
  relationships: {
    post: {id: '1', type: 'post'}
  },
  attributes: {
    lang: 'ru',
    title: 'Здравствуй, мир!',
    body: 'Чудесная погодка сегодня, не так ли?'
  }
}

此方法还可以让您收集特定语言的评论。

JSON API和Ember Data的翻译

4 个答案: