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>
  <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">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"></script>
</head>
<body>
​
<script type="text/x-handlebars">
  <h1>Login</h1>
​
  {{outlet}}
</script>
​
<script type="text/x-handlebars" id="index">
  {{my-menu}}
</script>
​
<script type="text/x-handlebars" id="components/my-login">
  {{input value=username placeholder='Username'}}
  {{input value=password placeholder='Password'}}
  <button {{action 'login'}}>Login</button>
</script>
​
<script type="text/x-handlebars" id="components/my-menu">
  <h1>Menu</h1>
  {{my-login action='login'}}
</script>
​
</body>
</html>
​
 
/* Put your CSS here */
html, body {
  margin: 20px;
}
​
 
App = Ember.Application.create();
​
App.Router.map(function() {
});
​
App.IndexController = Ember.Controller.extend({
  actions: {
    login: function(data) {
      console.log(data);
      alert('Logging in...');
    }
  }
});
​
App.MyLoginComponent = Ember.Component.extend({
  actions: {
    login: function() {
      this.sendAction('action', this.getProperties('username', 'password'));
    }
  }
})
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers