Obtaining related Ember model data from within a route or component

问题

Update - partial solution - see below

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')
});

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}}

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.

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.

Using the JSONAPIAdapter.

Many thanks in advance!

Update

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!

回答1:

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.

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

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

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

Here is the component

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);
}
});

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}}

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?

Hope this helps!

来源：https://stackoverflow.com/questions/37436089/obtaining-related-ember-model-data-from-within-a-route-or-component

标签

ember.js