Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="index">
    {{#each todo in todos}}
      <p>{{todo.title}} {{confirm-button title="Delete" action="deleteTodo" param=todo}}</p>
    {{/each}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="components/confirm-button">
    {{#if isShowingConfirmation}}
      <button {{action "confirm"}}>Click again to confirm</button>
    {{else}}
      <button {{action "showConfirmation"}}>{{title}}</button>
    {{/if}}
  </script>
</body>
</html>
 
App = Ember.Application.create();
​
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
      todos: [{
        title: "Learn Ember.js"
      }, {
        title: "Walk the dog"
      }]
    };
  },
  
  actions: {
    deleteTodo: function(todo) {
      var todos = this.modelFor('index').todos;
      todos.removeObject(todo);
    }
  }
});
​
App.ConfirmButtonComponent = Ember.Component.extend({
  actions: {
    showConfirmation: function() {
      this.toggleProperty('isShowingConfirmation'); 
    },
    
    confirm: function() {
      this.toggleProperty('isShowingConfirmation');
      this.sendAction('action', this.get('param'));
    }
  }
});
Output

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

Dismiss x