Doubts in general about ember components by a java developer - ember.js

Question

I created a panel component with a button which contains some actions in controller.
So the first doubt: What's the main difference between components and views?
I really dont know if i'm doing things in the correct way
First i created a "father" controller which will contain the method to send a panel action to the specified controller action
App.BasicArrayController = Ember.ArrayController.extend({
actions : {
panelActions : function(action) {
this.send(action)
},
},
});
App.BasicObjectController = Ember.ObjectController.extend({
actions : {
panelActions : function(action) {
this.send(action);
},
},
});
Next i created the controller which will extend the "father" and created a object which contains the name to display in panel and the name of action in controller
App.AlbumController = App.BasicObjectController.extend({
arrayActions : [Em.Object.create({name: 'Edit'},{action:'edit'}),Em.Object.create({name: 'Delete'},{action:'delete'})],
actions : {
edit:function(){
this.transitionToRoute('album.edit');
},
confirmDelete:function(){
this.get('model').deleteRecord();
this.get('model').save();
this.transitionToRoute('albums');
}
}
});
This is the correct way to extend a controller in ember?
Next i created the component template (.hbs) with bootstrap
<div {{bind-attr class=bootStrapClass}}>
<div class="panel-heading">
{{#if arrayActions}}
<div style="margin-top: -1.3%" class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
{{#each arrayActions}}
<li><a href="#" {{action 'panelActions' this on='click'}}>{{name}}</a></li>
{{/each}}
</ul>
</div>
{{/if}}
<h3 data-toggle="collapse" data-parent="#accordion" {{bind-attr
href=hrefCollapseId}} {{action 'collapse' on='click'
}} class="panel-title">
<span {{bind-attr id=collapseId}}
class="glyphicon glyphicon-collapse-up">{{title}}
</h3>
</div>
<div {{bind-attr id=customId}} class="panel-collapse collapse in">
<div class="panel-body">{{yield}}</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" {{bind-attr id=myModalId}} tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button {{action 'cancelDelete'}} type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Album</h4>
</div>
<div class="modal-body">Are you shure?</div>
<div class="modal-footer">
<button type="button"
{{action 'cancelDelete'}} class="btn btn-default"
data-dismiss="modal">Cancel</button>
<button type="button"
{{action 'confirmDelete' this}} class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
Now the component .js
App.PanelPrimaryComponent = Ember.Component.extend({
setupIds: function(){
this.setProperties({
collapseId: "collapse" + this.get('customId'),
hrefCollapseId:"#" + this.get('customId'),
myModalId: "myModal" + this.get('customId')
});
}.on("init"),
actions : {
panelActions : function(obj) {
if(obj.action==="delete") this.send('delete');
else
this.sendAction('panelActions',obj.action);
},
delete:function(){
var jqueryModalId = "#"+ this.get('myModalId');
$(jqueryModalId).modal('toggle')
},
cancelDelete:function(){
this.set('deleteMode',false);
},
confirmDelete:function(){
$(".close").click();
this.sendAction('panelActions','confirmDelete');
},
collapse:function(){
var jQueryCollpaseId= "#"+this.get('collapseId');
if($(jQueryCollpaseId).hasClass("glyphicon-collapse-down")){
$(jQueryCollpaseId).removeClass("glyphicon-collapse-down").addClass("glyphicon-collapse-up")
}
else{
$(jQueryCollpaseId).removeClass("glyphicon-collapse-up").addClass("glyphicon-collapse-down")
}
}
}
});
Next a template which uses the component
<div class="col-xs-6">
{{#panel-primary title="Album" bootStrapClass="panel panel-success" customId="album" arrayActions=arrayActions panelActions='panelActions'}}
<span class="label label-default">Name: </span> {{name}} <span
class="label label-default">Description: </span> {{description}} {{/panel-primary}}
</div>
{{outlet}}
In general this is the best way to do that kind of component? What shold i do different in general?
Since i can have multiple panels i have to bind a dynamic id("collpase" and "modalId" , this is the correct way?
This is the best way to send that kind of action to controller in a component?
In general this is the best way to do that kind of component? What shold i do different in general?