Query Param Visiblity Spike
{
"version": "0.10.7",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.10.0",
"ember-data": "2.10.0",
"ember-template-compiler": "2.10.0",
"ember-testing": "2.10.0"
},
"addons": {}
}
<h1>Query Param Visiblity Spike</h1>
<button {{action 'createInquiry' false 500}}>Account Inquiry</button>
<button {{action 'createInquiry' true 8675309}}>Transaction Inquiry</button>
<button {{action 'resetRoute'}}>Reset</button>
{{#if showModal}}
{{#if isTransactionInquiry}}
<h2>Transaction Inquiry</h2>
<p>Transaction ID: {{inquiryId}}</p>
{{else if isAccountInquiry}}
<h2>Account Inquiry</h2>
<p>Account ID: {{inquiryId}}</p>
{{/if}}
{{/if}}
import Ember from 'ember';
export default Ember.Route.extend({
// This would live on some non-application route
queryParams: {
inquiryType: {},
inquiryId: {}
},
actions: {
// This would live on some non-application route
queryParamsDidChange(changed, present) {
if(Ember.isPresent(present.inquiryType) && Ember.isPresent(present.inquiryId)) {
this.send('toggleModal', true);
} else {
this.send('toggleModal', false);
}
},
// This would get called from the route
toggleModal(visible) {
this.controller.set('showModal', visible);
},
resetQueryParams() {
this.controller.set('inquiryType', null);
this.controller.set('inquiryId', null);
}
}
});
import Ember from 'ember';
// This would live on some non-application route
export default Ember.Controller.extend({
queryParams: ['inquiryType', 'inquiryId'],
inquiryType: null,
inquiryId: null,
isTransactionInquiry: Ember.computed.equal('inquiryType', 'transaction'),
isAccountInquiry: Ember.computed.equal('inquiryType', 'account'),
actions: {
createInquiry(isTransaction, id) {
this.setProperties({
inquiryType: isTransaction ? 'transaction' : 'account',
inquiryId: id
});
},
resetRoute() {
this.container.lookup('route:application').send('resetQueryParams');
}
}
});