Menu
Semantic UI (a HTML5 component library) provides the Sitebar component, which needs a specific page structure directly below <body>.
Since Ember introduced HTMLBars, it wraps all templates' content within another <div> tag before injecting it into the DOM, e.g.
<div id="ember389" class="ember-view"><!-- original template's content comes here --></div>
which makes using the above mentioned Sitebar and comparable components virtually unusable.
There have been similar questions for older Ember versions, but their answers do not work anymore, as Views have been retired. Ember still provides the private _MetamorphView class for "templates without wrappers", but besides the fact that it is also deprecated, I don't now how to incorporate them into my Route.
Any help is greatly appreciated!
341
It's actually not that much hard as you think. All you need is to make some slight changes in the component. (Assume you're using Ember 2.x and want to make side bar as component)
For Eg.
// app/components/side-bar.js
export default Ember.Component.extend({
classNames: ['ui', 'sidebar']
});
// app/templates/components/side-bar.hbs
{{yield}}
// usage
// app/templates/application.hbs
{{#side-bar}}
// your sidebar contents go here
{{/side-bar}}
<div class="pusher">
// Your site's actual content
{{outlet}}
</div>
If the side bar isn't necessary to be a component, then it'll be lot simpler
// app/templates/application.hbs
<div class="ui sidebar">
// ...
</div>
<div class="pusher">
// Your site's actual content
{{outlet}}
</div>
EDIT - answer to the comment
A sidebar can be initialized inside any element, not just a page's body.
http://semantic-ui.com/modules/sidebar.html#using-a-custom-context
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
