<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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |