Components inheritance

Design
1

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

2

Hello,

I had the same problem and I ended doing this:

Templates:

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{some-widget title='My Title!'}}
  </script>

  <script type="text/x-handlebars" data-template-name="components/base-widget">
    <div class="widget" >
      <div class="widget-title">
        <h2>{{title}}</h2>
        <p {{action resize}}>Click on base widget here!</p>
      </div>
      <div class="widget-content">
        {{yield}}
      </div>
    </div>
  </script>
  
  <script type="text/x-handlebars" data-template-name="components/some-widget">
    {{#base-widget resize=(action 'resize') title=title}}
       <a {{action 'resize'}}>Click on some widget here</a>
    {{/base-widget}}
  </script>

JavaScript:

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
});


App.BaseWidgetComponent = Ember.Component.extend({
  title: null
});

App.SomeWidgetComponent = App.BaseWidgetComponent.extend({
  title: null,
  actions: {
    resize: function () {
      alert('inside some widget resize');
      return true;
    }
  }
});

I hope this will help you.