从路由或组件内获取相关的Ember模型数据 [英] Obtaining related Ember model data from within a route or component

问题描述

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

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

I have a (product category) model with a many to many relationship eg

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

我的类别路由（product.items）由此模型支持，显示相关的产品数据：

My category route (product.items) is backed by this model, and it's no problem displaying the related product data:

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

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

However, I need to obtain the related data within the child route (product.items.item). The model hook for the route looks like this:

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

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

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

I can then then pass this model to a component.

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

What I am trying to do is access that related within a component (or within the route). Assuming the model is available in the component as parentModel I can access the name of the parent category as

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

我以为我可以为相关产品做同样的事情，比如

I thought I could do the same for the related products ie

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

但是，这不返回任何东西。我在这里犯了一个基本的错误吗？

However, this doesn't return anything. Am I making a basic mistake here?

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

The reason I want to access the other products in the parent category, when viewing an item, is that I want the user to paginate through each item.

使用JSONAPIAdapter。

Using the JSONAPIAdapter.

非常感谢！

更新

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

This code does work when I navigate from the parent category - but not when you're on them item page and the app is refreshed on a code update - which is why I wasn't getting the expect results. So partially there! Will update if I can find a full solution!

推荐答案

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

Here is my solution - I'm sure it can be improved upon!

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

The purpose of my component is to allow the user to paginate through individual (product) item pages. The product category model has a many to many relationship with products as shown in the original question.

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

In my template (product/items/item.hbs) I call the component

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

其中模型是RSVP哈希{data：itemModel，mainData：mainModel}。 itemModel是自解释的; mainModel是类别模型。

Where the model is the RSVP hash {data:itemModel,mainData:mainModel}. The itemModel is self explanatory; the mainModel is the category model.

这是组件

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的模板中，我有

In the template for the component pagination-item.hbs I have

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

我认为最好是为li添加另一个组件，然后处理点击作为一个动作，并将值传递给子组件，而不是按照我在父组件中的方式执行;

I assume it's better to crate another component for the li and then handle the click as an action on that and pass the value to the child component rather than doing it the way I am in the parent component?

希望这有帮助！

这篇关于从路由或组件内获取相关的Ember模型数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！