Question

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

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

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。

非常感谢提前！

更新

当我从父类别导航时，此代码可以正常工作 - 但是当您在他们的项目页面上进行导航并且代码更新时刷新了应用时 - 这就是为什么我没有获得期望的结果。那么部分在那里！如果我能找到完整的解决方案，将会更新！

Answer 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创建另一个组件，然后将click作为一个动作处理并将值传递给子组件，而不是按照我在父组件中的方式进行操作？

希望这有帮助！

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

1 个答案: