ember.js, ember-cli: Outlets not nesting properly -
ember.js, ember-cli: Outlets not nesting properly -
i'm having issue i'm unable nested outlets appear in ember cli app. view tree want follows:
application (list of resources, of client_availability one) - client_availabilities.index (list of client_availabilities) -- client_availability (individual client_availability)this similar "application > posts.index > post" hierarchy in ember starter kit. desired behavior list of client_availabilities appear in "mainoutlet" when navigate client_availabilities.index, persist when bring individual client_availability in "suboutlet".
easy, right? default behavior & why love ember. however, can't seem working. when explicitly target named suboutlet in client_availabilities.index , click on individual client_availability, nil shows in either outlet:
scenario 1: render suboutlet within client_availabilities/app/template/application.hbs:
{{link-to 'client availabilities' 'client_availabilities'}} {{outlet 'mainoutlet'}} /app/template/client-availabilities/index.hbs:
{{outlet 'suboutlet'}} /app/routes/client-availabilities/index.js:
import ember 'ember'; export default ember.route.extend({ rendertemplate: function(){ this.render({ into: "application", outlet: "mainoutlet" }); }, model: function() { homecoming this.store.find('client_availability'); } }); /app/routes/client-availability.js:
import ember 'ember'; export default ember.route.extend({ rendertemplate: function(){ this.render('client_availability', { into: "client_availabilities", outlet: "suboutlet" }); }, model: function(params) { homecoming this.store.find('client_availability', params.client_availability_id); } }); alternately, when target mainoutlet in application, client_availability appears in "suboutlet" client_availabilities.index disappears "mainoutlet":
scenario 2: render suboutlet within application/app/template/application.hbs:
{{link-to 'client availabilities' 'client_availabilities'}} {{outlet 'mainoutlet'}} {{outlet 'suboutlet'}} /app/template/client-availabilities/index.hbs: (empty)
/app/routes/client-availabilities/index.js:
import ember 'ember'; export default ember.route.extend({ rendertemplate: function(){ this.render({ into: "application", outlet: "mainoutlet" }); }, model: function() { homecoming this.store.find('client_availability'); } }); /app/routes/client-availability.js:
import ember 'ember'; export default ember.route.extend({ rendertemplate: function(){ this.render('client_availability', { into: "application", outlet: "suboutlet" }); }, model: function(params) { homecoming this.store.find('client_availability', params.client_availability_id); } }); and here's router, same in both cases:
/app/router.js:
import ember 'ember'; var router = ember.router.extend({ location: 'auto' }); router.map(function() { this.resource('client_availabilities', function() { this.resource('client_availability', { path: ':client_availability_id' }); }); }); export default router; i'm happy share more code, application split several files , unfortunately not can post in entirety. can see i'm doing wrong? rest of app working fine, can't seem basic behavior work.
do have /app/templates/client-availibilities.hbs template {{outlet}} within of it? without this, app going lose place in outlet tree. ember-cli , ember starter kit very, different each other in structure, can see confusion comes from.
how think of ember's rendering style each handlebars file within templates folder (i.e. /templates/users.hbs) represents alter overall state of application 1 subject (example: newsfeed users). corresponding subfolders within templates folder alter state of subject itself.
for example:
required templates users container or users page need app-wide @ /templates/users.hbs optional templates users index @ /templates/users/index.hbs users show @ /templates/users/show.hbs users new @ /templates/users/new.hbsyou can have [ /templates/users.hbs ] without having [ /templates/users/*.hbs ] , still maintain track of data; however, cannot have [ templates/users/index.hbs ] without [ /templates/users.hbs ] , still maintain track of data. why? imagine if navigate somesite.com/users. there no top-level template outlet ember can render [ users/index.hbs ] template. [ /templates/users.hbs ] template bridges gap , serves container other pages within /templates/users folder well.
for example, in terms of app, in order render [ /app/templates/client-availibilities/index.hbs ] when user visits http://www.yourwebsite.com/client-availibilities, app need these templates defined ember can drill downwards them.
application.hbs // , in outlet, render... --client-availibilities.hbs // , in outlet, render default... ----client-availibilities/index.hbs // then, client-availability (singular), can have ember render in ----client-availibilities/show.hbs // render in client-availabilites separate state of subject. can nested within index route within router renders within index template. as is, construction app such...
/app/router.js
... // previous code router.map(function() { this.resource('client_availabilities', function() { this.route('show', { path: '/:client_availability_id' }); // this.route('new'); ! if needed ! // this.route('edit', { path: '/:client_availability_id/edit' ); ! if needed ! }); }); ... // code /app/templates/application.hbs
{{link-to 'client availabilities' 'client_availabilities'}} {{outlet}} /app/templates/client-availabilities.hbs
{{outlet}} /app/templates/client-availabilities/index.hbs
<ul> {{#each}} {{#if available}} <li> {{#link-to #link-to 'client-availabilities.show' this}} {{firstname}} {{lastname}} {{/link-to}} </li> {{/if}} {{else}} <!-- want render if each loop returns nothing, why it's outside if statement --> <li>nobody available</li> {{/each}} </ul> <!-- note: don't need set outlet here because you're @ end of tree --> /app/templates/client-availabilities/show.hbs
<!-- want show each availability -->> <!-- note: don't need set outlet here because you're @ end of tree --> /app/routes/client-availabilities/index.js
import ember 'ember'; export default ember.route.extend({ model: function() { homecoming this.store.findall('client_availability'); } }); /app/routes/client-availabilities/show.js
import ember 'ember'; export default ember.route.extend({ model: function(params) { homecoming this.store.find('client-availability', params.client_availability_id); } }); /app/models/client-availability.js
import ds 'ember-data'; var client-availability = ds.model.extend({ firstname: ds.attr('string'), lastname: ds.attr('string'), available: ds.attr('boolean'), available_on: ds.attr('date') }); export default client-availability; however, sure want construction app availability of each client? wouldn't create more sense construction each client , filter each client show if available or not? resources supposed nouns, , routes supposed adjectives. therefore, best utilize client model instead of availability , have either isavailable property on model (as used in illustration above) or one-to-many association additional availability model if want show clients have several availabilities (as shown below).
for example,
/app/models/client.js
import ds 'ember-data'; var client = ds.model.extend({ firstname: ds.attr('string'), lastname: ds.attr('string'), availabilities: ds.hasmany('availability') }); export default client; /app/models/availability.js
import ds 'ember-data'; var availability = ds.model.extend({ date: ds.attr('date'), client: ds.belongsto('client') }); export default availability; in long run, latter approach set app show availabilities @ 1 time , allow user filter client, plus allow user view client , see availabilities. original approach (the isavailable property on client model), user can availabilities client model itself, if user wants see clients available on, say, march 3rd @ noon? well, without availability model associated client model, going have set lot of code client controller ember give default if go downwards one-to-many path.
if need more advice on go here, allow me know. i'm more happy add together more examples of templates, controllers, , routes you'll need in order pull off.
ember.js ember-cli
Comments
Post a Comment