我的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}}前景-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>组件/前景，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); } } });组件/前景，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）未突出显示潜在客户列表，因为初始opensProspectId设置为0。
在这些情况下如何设置openedProspectId？
我可以在routes / 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); } });但我怎么能把它传递给opensProspectId？ 或者我应该以另一种方式构建我的应用程序？
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?
最满意答案
这里有一些可以重做的东西。 我将首先使用link-to helper而不是在单击潜在客户时发送操作。 这将为您提供统一的起点（路线），并允许用户在新窗口中打开潜在客户，如果他们决定。
路径自然会在控制器上设置属性model 。 您可以将其作为activeProspect传递给单个的prospect-item组件。 然后在该组件中只比较prospect.id == activeProspect.id以确定是否应该突出显示该行。
我有一个单独的路线来强调潜在客户，这似乎很奇怪，但我不知道您的业务需求。 您可以考虑使用queryParams来生成类似此list/27?prospect=88的URL，并为潜在客户的“完整视图”保留路由。
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.
更多推荐
发布评论