2016-03-01 90 views
0

我router.js:Ember 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}} 

前景-list.hbs:

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

前景,item.hbs

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

组件/前景列表。 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); 
     }    
    }  
}); 

组件/前景-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')); 
     } 
    } 

}); 

一切工作很好,当我在浏览器中启动应用程序与http://localhost:4200,但是当我从http://localhost:4200/list/27/prospect/88当前加载的前景(ID为88)开始不在预期列表中突出显示,因为初始打开的纵向标记集为0.

在这种情况下,我如何设置opensProspectId?

我能得到像路由/ prospect.js这些ID:

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

但我该如何将它传递给openedProspectId?还是应该以另一种方式构建我的应用程序?

回答

1

有几件事情可以在这里重做。我将首先使用链接帮助程序,而不是在单击潜在客户时发送操作。这将给你一个统一的起点(路线),并允许用户在他们决定的时候在新窗口中打开潜在客户。

该路线自然会在控制器上设置属性model。您可以将其传递到activeProspect的个人潜在客户项目组件中。然后在该组件内比较prospect.id == activeProspect.id以确定该行是否应该突出显示。

我有一条单独的路线来突出潜在客户,但我不了解您的业务需求似乎很奇怪。你可以考虑使用queryParams来产生一个像这样的网址list/27?prospect=88,并保留前景的'全景'路线。

+0

谢谢。我使用链接到帮助器,这解决了我的问题,因为它会在应用程序加载时设置活动类。 – Dmytro