Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<title>CE with Nested Input 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(HTMLElement.prototype);
  
  MyInputProto.createdCallback = function() {
    var input = this.querySelector('input');
    if (!input) {
      input = this.appendChild(document.createElement('input'));
    }
    
    input.value = this.getAttribute('myvalue');
  };
  
  MyInputProto.attachedCallback = function() {
    console.log('attached');
      
      var input = this.firstElementChild;
      input.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();
      }
    });
    
    input.addEventListener('keyup', function(ev) {
      this.setAttribute('myvalue', input.value);
    }.bind(this));
  };
  
  MyInputProto.attributeChangedCallback = function(attr, oldVal, newVal) {
    if (attr === 'myvalue') {
      this._setValue(newVal);
    }
  };
  
  MyInputProto._setValue = function(val) {
    this.firstElementChild.value = val;
  };
  
  document.registerElement('my-input', {
    prototype: MyInputProto
  });
  
})();
</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));
    }
  }
});
</script>
<script type="text/x-handlebars">
<button {{action 'showStuff'}}> Show the Input</button>
{{#if isStuffVisible}}
  <div>
    <my-input {{bind-attr myvalue="theValue"}}></my-input>
  </div>
  
  <div {{bind-attr something=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