Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script src="//builds.emberjs.com/tags/v1.9.0/ember.js"></script>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
 
    
</head>
<body>
​
  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
​
    {{outlet}}
    {{my-modal}}
  </script>
​
  <script type="text/x-handlebars" data-template-name="index">
    <h1>Index</h1>
    
    {{main-component model=model}}
  </script>
​
  <script type="text/x-handlebars" data-template-name="components/main-component">
    <h2>Main component</h2>
    
    <p>Pick color to open modal:</p>
    {{#each color in model}}
        {{sub-component color=color}}
    {{/each}}
  </script> 
    
    
  <script type="text/x-handlebars" data-template-name="components/sub-component">
    <button {{action "triggerModal" color}}>{{color}}</button>
  </script> 
    
    
    
    
   <script type="text/x-handlebars" data-template-name="components/my-modal">
     
     {{#if showModal}}
        <h1>Modal</h1>
​
        <p>This is the modal content - color is: {{color}}</p>
     {{/if}}
  </script> 
    
    
</body>
</html>
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers