JSFiddle - React, Tailwind, and code Playground

by babinho

HTML

<script src="http://builds.emberjs.com/tags/v1.12.0/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.12.0/ember.js"></script>
<script type="text/x-handlebars">
   Ember inheritance demo
   {{my-bird}}
   <br>
   {{my-duck}}
</script>
 
<script type="text/x-handlebars" data-template-name="components/my-bird">
    <h2>Hello, my name is {{name}}!</h2>
    <button {{action 'speak'}}>Make a sound</button>
    <button {{action 'fly'}}>Fly birdie fly</button>
</script>
    
<script type="text/x-handlebars" data-template-name="components/my-duck">
    <h2>Hello, my name is {{name}}!</h2>
    <button {{action 'speak'}}>Make a sound</button>
    <button {{action 'fly'}}>Fly birdie fly</button>
    <button {{action 'waddle'}}>Make a move, duck</button>
</script>

JavaScript

var App = Ember.Application.create({});

App.MyBirdComponent = Ember.Component.extend({
  name: 'Bird',
  actions: {
    fly: function() {
      alert("I'm flying, la la");
    },
    speak: function() {
      alert('Tweet!');
    }
  }  
});

App.MyDuckComponent = App.MyBirdComponent.extend({
  name: 'Ducky McQuack',
  actions: {
    speak: function() {
      alert('Quack!');   
    },
    waddle: function() {
      alert('Waddle, waddle!');        
    }
  }
});