I've been experimenting with dynamic compartmentalization in EmberJS by passing a JSON structure into a Toolbar. Here is an example of what it looks like:
{
draggable: true,
buttons: [
{label: "Portrait", action="vertical"},
{label: "Landscape", action="horizontal"}
]
}
This Toolbar is used in a picture viewer to rotate photos vertically and horizontally. To make it reusable for other parts of the application, I turned it into a Component and linked the click event to the parent controller so that clicking on a button would rotate the picture. However, I'm having trouble adding the active class to the clicked button, most likely due to the nested nature of the buttons. How can I apply CSS styling to the clicked button by giving it the active class?
I attempted to set an `isActive` property in each button object when initializing and then setting it to true using the action function, but I couldn't figure out how to use observables with nested data structures. Do I need to turn each button into a separate component, or is there another solution?
Any help is appreciated.
Templates
<script type="text/x-handlebars" data-template-name="photo-gallery">
<div id="PictureApp"></div>
{{#if toolbar}}
{{ui-toolbar options=toolbar buttonClicked="changeOrientation"}}
{{/if}}
</script>
<script type="text/x-handlebars" data-template-name="components/ui-toolbar">
{{title}}
<div class="overlay">
<div class="toolbar draggable">
{{#if draggable}}
<div class="header draggable-handle"></div>
{{/if}}
<ul>
{{#each buttons}}
<li{{action "clicked" this}}>{{label}}</li>
{{/each}}
</ul>
</div>
</div>
</script>
JS
App.UiToolbarComponent = App.Component.extend({
actions: {
clicked: function(context){
console.log(context);
this.sendAction("buttonClicked", context.action);
}
},
didInsertElement: function(){
if(this.get("draggable")) {
this.$(".draggable").draggable({handle: ".draggable-handle"});
}
}
});