ember.js - 在 emberjs 中使用更详细的数据动态填充模型

Question

我对在 emberjs 中实现主从 View 有点困惑。

我的大多数 View 都有一个主视图，它只是标题列表。然后，用户可以单击此类标题，他/她会获得带有详细 View 的覆盖层(有点像典型的新闻站点页面)。

现在，我注意到当 ember 询问主视图的信息时，它会调用如下 URL:/backend/newsitems。但这些调用可能会变得非常繁重，因为后端返回所有新闻站点及其所有详细数据的列表。但这感觉不对，因为用户只查看主视图，尚未请求任何详细信息。

有没有办法让 ember 清楚地知道主视图只需要几个属性，并且对详细信息的请求应该获取该特定项目的额外属性？

举个例子，我的模型如下所示:

App.Newsitem = DS.Model.extend({
  slug: DS.attr('string'),
  type: DS.attr('string'),
  title: DS.attr('string'),
  summary: DS.attr('string'),
  text: DS.attr('string'),
  thumb: DS.attr('string'),
  date: DS.attr('date'),

  mediaitems: DS.hasMany('App.Mediaitem')
});

但我的主视图只需要 id type title 来显示标题列表和该标题旁边的图标。然后，当用户请求一个新闻站点的详细信息时，应获取所有其他属性。

Answer 1

我通过让服务器在有效负载中包含“部分”属性来解决这个问题。如果只是部分响应，则“partial”将为 true；如果是完整响应，则“partial”将为 false。如果您无法更改服务器 API(因此无法在有效负载中包含“部分”属性)，我还将提供解决方法。

正如其他人所建议的，在“详细”路由的模型 Hook 中，如果当前加载的模型只是部分模型，则调用模型的 reload() 方法:

App.ItemRoute = Ember.Route.extend({

    model: function (params) {
        return this.store.find('item', params.item_id).then(function (item) {
            if (item.get('partial'))
                return item.reload();
            else
                return item;
        });
    }

});

这解决了部分问题，但如果您的用户随后导航到主路由，则 Ember Data 将用服务器响应替换所有字段，并清除未从服务器返回的任何属性值。要解决这个问题，请重写商店的推送方法，如下所示:

App.ApplicationStore = DS.Store.extend({
    push: function (type, data, _partial) {
        if (data.partial && this.hasRecordForId(type, data.id))
            return this.getById(type, data.id);
        else
            return this._super(type, data, _partial);
    }
});

这可确保您的部分负载不会覆盖完整负载。

这里有一个 jsbin 来演示:http://jsbin.com/bejop/6/edit

如果您无法在响应中包含“部分”属性，那么您可以应用与上述相同的逻辑，但在模型中查找将出现在详细响应中但不会出现在您的模型中的特定属性。部分回应。然后当你重写push方法时，你可以这样做:

    App.Partials = [
        { type: App.Item, propertyName: 'detailed_description' }
    ];

    App.ApplicationStore = DS.Store.extend({
        push: function (type, data, _partial) {

            var that = this;
            var partial = App.Partials.find(function (p) {
                return p.type === that.modelFor(type);
            });

            if (partial && !data[partial.propertyName])
                return this.getById(type, data.id);

            return this._super(type, data, _partial);
        }
    });