CODEWITHSUNDEEP
ember.js
Dmytro
Dmytro

Reputation: 105

Ember JS: How to set an attribute in parent component?

My router.js:

Router.map(function() {  
    this.route('dashboard', { path: '/' });
    this.route('list', { path: '/list/:list_id' }, function() {
      this.route('prospect', { path: 'prospect/:prospect_id', resetNamespace: true });
    });
});

list.hbs:

<div class="content-wrapper">
    <div class="content">
        {{prospect-list name=model.name prospects=model.prospects openProspect="openProspect"}}
    </div>
</div>

{{outlet}}

prospect-list.hbs:

{{#each prospects as |prospect|}}
    {{prospect-item prospect=prospect openedId=openedProspectId openProspect="openProspect"}}
{{/each}}

prospect-item.hbs

<td>{{prospect.firstName}}</td>
<td>{{prospect.list.name}}</td>

components/prospect-list.js 

import Ember from 'ember';

export default Ember.Component.extend({  

    openedProspectId: 0,

    actions: {
        openProspect(prospect) {
            this.set('openedProspectId', prospect.get('id'));
            this.sendAction('openProspect', prospect);  
        }               
    }    
});

components/prospect-list.js 

import Ember from 'ember';

export default Ember.Component.extend({  
    tagName: 'tr',
    classNameBindings: ['isOpen:success'],

    isOpen: Ember.computed('openedId', function() {
        return this.get('openedId') == this.get('prospect').id;
    }), 

    click: function(ev) {
        var target = $(ev.target);
        if(!target.is('input'))
        {       
            this.sendAction('openProspect', this.get('prospect'));
        }
    }

});

Everything works good when I start application in browser with http://localhost:4200, but when I start from http://localhost:4200/list/27/prospect/88 currently loaded prospect (with id 88) is not highlighted in prospect list, because initial openedProspectId set 0.

How can I set openedProspectId in these case?

I can get these id in routes/prospect.js like:

import Ember from 'ember';

import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {

    model(params) {
        return this.store.findRecord('prospect', params.prospect_id);
    },

    afterModel(params) {
        console.log(params.id); 
    }
});

but how I can pass it to openedProspectId? Or should I build my application on another way?

Upvotes: 0

Views: 558

Answers (1)

Collin James
Collin James

Reputation: 9280

There are a few things that could be reworked here. I would start by using the link-to helper instead of sending actions when the prospect is clicked. This will give you a uniform starting point (the route) and allows the user to open the prospect in a new window if they decide to.

The route will naturally set the property model on the controller. You could pass this into the individual prospect-item components as activeProspect. Then within that component just compare prospect.id == activeProspect.id to determine if the row should be highlighted.

It does seem odd to me to have a separate route to highlight a prospect, but I'm unaware of your business requirements. You might consider using queryParams to produce a url like this list/27?prospect=88 and reserve the route for the 'full view' of the prospect.

Upvotes: 1

Related Questions