Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<title>Subclassed CE in Ember</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.9.1/ember.prod.js"></script>
<!-- document.registerElement polyfill - forced -->
<script src="http://jsbin.com/kakazi.js"></script>
<!-- CUSTOM ELEMENT -->
<script>
(function() {
  
  var MyInputProto = Object.create(HTMLInputElement.prototype);
  MyInputProto.attachedCallback = function() {
    console.log('attached');
    this.addEventListener('keydown', function(ev) {
      var key = ev.keyCode;
      var isNumeric = (key >= 48 && key <= 57) || (key >= 96 && key <= 105);
      var modifier = ev.altKey || ev.ctrlKey || ev.shiftKey;
      var otherAllowed = key in {46:true, 8:true, 9:true, 27:true, 13:true, 110:true, 190:true};
      
      var isAllowed = (isNumeric && !modifier) || otherAllowed;
      
      if (!isAllowed) {
        ev.preventDefault();
      }
    });
  };
  
  document.registerElement('my-input', {
    prototype: MyInputProto,
    extends: 'input'
  });
  
})();
</script>
<!-- APP -->
<script>
var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend({
  isStuffVisible: false,
  theValue: 50,
  actions: {
    showStuff: function() {
      this.set('isStuffVisible', true);
    },
    setValue: function() {
      this.set('theValue', Math.floor(Math.random()*100));
    }
  }
});
Ember.TextField.reopen({
  attributeBindings: ['is']
});
</script>
<script type="text/x-handlebars">
<button {{action 'showStuff'}}> Show the Input</button>
{{#if isStuffVisible}}
  <div>
    {{input is="my-input" value=theValue}}
  </div>
  
  <p>App can get the value: {{theValue}}</p>
  
  <button {{action 'setValue'}}>Set Random Value</button>
{{/if}}
</script>
Output

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

Dismiss x
public
Bin info
chrisbatemanpro
0viewers