2016-05-25 7 views
0

Update - Teillösung - siehe untenBeschaffen von Beziehungsdaten Ember Modell aus innerhalb einer Route oder Komponente

Ich habe eine (Produktkategorie) Modell mit vielen zu vielen Beziehung zB

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

Meine Kategorie Route (product.items) von diesem Modell unterstützt, und es ist kein Problem, das im Zusammenhang Produktdaten anzeigt:

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

Allerdings muß ich Beziehen Sie die zugehörigen Daten innerhalb der untergeordneten Route (product.items.item). Der Modellhaken für die Route sieht so aus:

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

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

Ich kann dann dieses Modell dann an eine Komponente weitergeben.

Was ich versuche zu tun, ist der Zugriff innerhalb einer Komponente (oder innerhalb der Route). das Modell unter der Annahme ist in der Komponente als parentModel verfügbar ich den Namen der übergeordneten Kategorie als

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

dachte ich zugreifen kann ich das gleiche für die entsprechenden Produkte tun könnte also

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

Doch diese doesn Gib nichts zurück. Mache ich hier einen grundlegenden Fehler?

Der Grund, warum ich beim Anzeigen eines Elements auf die anderen Produkte in der übergeordneten Kategorie zugreifen möchte, ist, dass der Benutzer durch jedes Element paginieren soll.

Verwenden des JSONAPIAdapter.

Vielen Dank im Voraus!

aktualisieren

Dieser Code funktioniert, wenn ich aus der Kategorie geordneten Ebene - aber nicht, wenn man auf sie sind Artikelseite und die App ist auf einem Code-Update aktualisiert - weshalb ich nicht war die erwarteten Ergebnisse erhalten. Also teilweise da! Wird aktualisiert, wenn ich eine vollständige Lösung finden kann!

+0

Hallo, ich bin mir nicht sicher, warum ich nicht auf die verwandten Daten bei einer App-Aktualisierung zugreifen kann, wenn ich das Produkt anschaue. Ich kann zum Beispiel immer noch auf den Namen der Kategorie zugreifen, wie oben angegeben, aber wenn ich die Länge des Produkt-Arrays zurückgebe (was zum Beispiel 5 sein sollte), werde ich Null. Das war, was mich vorher warf, als ich immer die App auf der Produktdetail (product.items.item) Route auffrischte! – Newfoundland

+0

Habe das jetzt funktioniert ... benutze den get call als ein Versprechen welches ich was ich in meiner Komponente machen muss zB mainModel.data.get (this.get ('relatedModel')). Dann (relatedItems => { console .log (relatedItems.get ('length')); relatedItems.forEach (Funktion (Artikel, Index)) { console.log (item.get ('Name')); }); }, reject = > { console.log ('Fehler:' + Zurückweisung); }); – Newfoundland

+0

Sie können Ihre eigene Frage für die Nachwelt beantworten - gehen Sie voran und erstellen Sie eine Antwort mit Ihren Ergebnissen und "akzeptieren" Sie sie. –

Antwort

0

Hier ist meine Lösung - ich bin sicher, dass es verbessert werden kann!

Der Zweck meiner Komponente ist es, dem Benutzer das Paginieren durch einzelne (Produkt-) Artikelseiten zu ermöglichen. Das Produktkategoriemodell hat eine viel zu viele Beziehung mit Produkten, wie in der ursprünglichen Frage gezeigt.

In meiner Vorlage (Produkt/Artikel/item.hbs) Ich rufe die Komponente

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

Wo das Modell der RSVP Hash {Daten: itemModel, MAINDATA: mainModel}. Das itemModel ist selbsterklärend; Das mainModel ist das Kategoriemodell.

Hier ist die Komponente

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 der Vorlage für die Komponente Paginierung-Artikel.hbs Ich habe

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

Ich nehme an, es zu Kiste besser ist eine andere Komponente für die Li und dann den Klick als eine Aktion auf die Handhabung und den Wert für das Kind Komponente zu übergeben, anstatt es die Art und Weise tun, die ich in der Mutter bin Komponente?

Hoffe, das hilft!

Verwandte Themen