Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Custom ViewModel event bindings">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
 <style>
   my-input {
     display: inline-block;
     
   }
   my-input div {
     height: 18px;
     width: 140px;
     background-color: white;
     border: solid 1px black;
   }
  </style>
  
<div id='out'></div>
​
<script id="my-input-template"
        type="text/stache">
 <div 
   ($keydown)='updateValue(%event)'
   tabindex='0'>{{value}}</div> 
</script>
  
<script id="app" type="text/stache">
<person-page>
  <person-edit {onsave}="@save" {person}="person">
    <form ($submit)="save(%event)">
      <h3>Name: {{person.name}}</h3>
​
      <p> Name: 
          <input {($value)}="person.name" 
                 {{#saving}}disabled{{/saving}}/>
          <input type='submit' value="save"
                 {{#saving}}disabled{{/saving}}/>
      </p>
    </form>
  </person-edit>
  <ul>
  {{#each messages}}
    <li>{{.}}</li>
  {{/each}}
  </ul>
</person-page>
</script>
​
  
  
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//canjs.com/release/2.3.7/can.jquery.js"></script>
<script src="//canjs.com/release/2.3.7/can.stache.js"></script>
</body>
</html>
 
​
can.Component.extend({
  tag: "person-page",
  viewModel: {
    person: {name: "Justin"},
    messages: [],
    addMessage: function(message){
      var messages = this.attr("messages");
      messages.unshift(message);
    },
    save: function(){
      var messages = this.attr("messages");
      messages.unshift("Saving");
      var def = can.Deferred();
      setTimeout(function(){
        def.resolve();
        messages.pop();
      },500);
      return def;
    }
  }
});
​
can.Component.extend({
  tag: "person-edit",
  viewModel: {
    save: function(event){
      event.preventDefault();
      var self = this,
          promise = this.attr("onsave")();
      this.attr("saving",true);
      
      promise.then(function(){
        self.attr("saving", false);
      })
    }
  }
})
​
$("#out").html( can.view("app",{}) );
​
​
Output

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

Dismiss x