Doubts in general about ember components by a java developer

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">&times;</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?

1. Since i can have multiple panels i have to bind a dynamic id("collpase" and "modalId" , this is the correct way?
2. This is the best way to send that kind of action to controller in a component?
3. In general this is the best way to do that kind of component? What shold i do different in general?