从路由或组件中获取相关的 Ember 模型数据答案

【问题标题】：Obtaining related Ember model data from within a route or component从路由或组件中获取相关的 Ember 模型数据
【发布时间】：2016-05-25 11:42:18
【问题描述】：

更新 - 部分解决方案 - 见下文

我有一个具有多对多关系的（产品类别）模型，例如

export default DS.Model.extend({
 name: DS.attr('string'),
 products:DS.hasMany('product')
});

我的分类路径（product.items）是由这个模型支持的，显示相关的产品数据是没有问题的：

{{#each model.data.products as |item|}}
 {{item.name}}
{{/each}}

但是，我需要在子路由（product.items.item）中获取相关数据。路由的模型钩子如下所示：

model(params) {
  let parentModel = this.modelFor('product.items'),
  let model = this.store.findRecord('product',params.id);

  return Ember.RSVP.hash({
    data:model,
    parentData:parentModel
  });
}

然后我可以将此模型传递给组件。

我想要做的是访问组件内（或路由内）的相关内容。假设模型在组件中作为 parentModel 可用，我可以访问父类别的名称为

 let name = parentModel.data.get('name');

我认为我可以对相关产品做同样的事情，即

 let products = parentModel.data.get('products');

但是，这不会返回任何内容。我在这里犯了一个基本错误吗？

我想在查看一个项目时访问父类别中的其他产品的原因是我希望用户对每个项目进行分页。

使用 JSONAPIAdapter。

提前非常感谢！

更新

当我从父类别导航时，此代码确实有效 - 但当您在它们的项目页面上并且应用程序在代码更新时刷新时 - 这就是我没有得到预期结果的原因。所以部分在那里！如果我能找到完整的解决方案，我会更新！

【问题讨论】：

您好，我不确定为什么在查看产品项目时无法访问应用程序刷新时的相关数据。我仍然可以访问（例如）上述类别的名称，但是如果我返回 products 数组的长度（例如应该是 5）我得到零。这就是我之前遇到的问题，因为我总是在产品详细信息（product.items.item）路线上刷新应用程序！
现在可以工作了...使用 get 调用作为我在组件中需要做的承诺，例如 mainModel.data.get(this.get('relatedModel')).then (relatedItems => { console.log(relatedItems.get('length'));relatedItems.forEach(function(item,index) { console.log(item.get('name')); }); },reject => { console.log('error: '+reject); });
您可以为后代回答自己的问题 - 继续用您的结果创建答案并“接受”它。
嗨，史蒂夫 H，我会这样做 - 希望它可以帮助其他人，我绝对相信它可以改进！！！很快就会发布。

标签： ember.js

【解决方案1】：

这是我的解决方案 - 我相信它可以改进！

我的组件的目的是允许用户对单个（产品）项目页面进行分页。如原始问题所示，产品类别模型与产品具有多对多关系。

在我的模板（product/items/item.hbs）中，我调用了组件

{{pagination-item data=model relatedModel='products' route='product.items.item'}}

其中模型是 RSVP 哈希 {data:itemModel,mainData:mainModel}。 itemModel 是不言自明的； mainModel 是类别模型。

这里是组件

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:'ul',
  pagination:null,

generate(itemSlug) {
  let page = {};
  let allData = this.get('data');
  let itemModel = allData.data; 
  let mainModel = allData.mainData;

  mainModel.data.get(this.get('relatedModel')).then(relatedItems => {
    let maxRecords = relatedItems.get('length');
    relatedItems.forEach(function(item,index) {
      if (item.get('slug') === itemSlug) {
        if (index === 0) {
          page.Prev = null;
          page.Next = relatedItems.objectAt(index+1).get('slug');
        }
        else if (index+1 === maxRecords) {
          page.Prev = relatedItems.objectAt(index-1).get('slug');
          page.Next = null;
        }
        else {
          page.Prev = relatedItems.objectAt(index-1).get('slug');
          page.Next = relatedItems.objectAt(index+1).get('slug');
        }
      }
    });
    this.set('pagination',page);
  },reject => {
    console.log('error: '+reject);
  });
},
init() {
  this._super(...arguments);
  let allData = this.get('data');
  let itemModel = allData.data;
  this.generate(itemModel.get('id'));
},
click(event) {
  let target = Ember.$(event.target);
  let pathname = target.context.pathname;
  let slug = pathname.split("/").reverse()[0];
  this.generate(slug);
}
});

在组件 pagination-item.hbs 的模板中我有

{{#each-in pagination as |key value|}}
{{#if value}}
<li>{{link-to key route value}}</li>
{{/if}}
{{/each-in}}

我认为最好为 li 创建另一个组件，然后将单击作为操作处理并将值传递给子组件，而不是像我在父组件中那样做？

希望这会有所帮助！

【讨论】：