Components inheritance

@Alex_Lvovsky wrote:

Hi, I'm new in Ember Maybe can you help how to write right. My application (one of its pages) will contain grid with widgets. Widgets will have headers, in the header there will be title and three buttons (resize, options and close). So I wanted, that each widget will handle it's action for each of these buttons. (e.g. one widget's resize will resize this widget for full screen, the other only for the half of the screen) That what I did:

Widget header (partial)

 <div class="widget-title">
     <h2>{{title}}</h2>
     <ul">
         <li  {{action 'setSettings'}}><img src="../assets/images/settings.png">
         </li>
         <li {{action 'resize'}}><img src="../assets/images/minimize.png">
         </li>
         <li {{action 'close'}}><img src="../assets/images/close.png">
         </li>
     </ul>
</div>

Base widget.hbs

 <div class="widget" >
   {{partial 'partials/widget/header'}}
     <div class="widget-content" >
       {{yield}}
     </div>
 </div>

SomeWidget.hbs

 {{#base-widget}}
       some template
 {{/base-widget}}

Main.hbs

 <div" >
   {{SomeWidget title='title' resize=(action "onResize")}}
 </div>

BaseWidget.js

     export default Ember.Component.extend({
       title: null,
       actions: {
         resize: function () {
           console.log('inside BaseComponent resize');
       }
     });

SomeWidget.js

    export default BaseComponent.extend({
       actions: {
         resize: function () {
           console.log('inside some widget resize');
         }
       }
     });

Main.js

 ...
 actions:{
     resize(){
       console.log('inside overview controller resize');
     }

And when I click on resize it don't go to resize of Main.js, it print only from BaseComponent. What I have missed? Please advise

Posts: 1

Participants: 1

Read full topic