-
-
Save saski/ffdfd9d0d86b9ae5ef79e91cf688ba79 to your computer and use it in GitHub Desktop.
Ember native form controls
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Ember Starter Kit</title> | |
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css"> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
<script src="http://builds.emberjs.com/tags/v1.13.3/ember.js"></script> | |
<script src="http://builds.emberjs.com/tags/v1.13.3/ember-template-compiler.js"></script> | |
<style id="jsbin-css"> | |
/* Put your CSS here */ | |
html, body { | |
margin: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id='app'></div> | |
<pre id="logs"></pre> | |
<script type="text/x-handlebars"> | |
<h2>Componentless Forms in ember</h2> | |
{{currentValue}} | |
<input type="range" | |
value={{currentValue}} | |
min=1 | |
max=10 | |
oninput={{action "changed" value="target.value"}} > | |
<input type="checkbox" | |
value={{currentValue}} | |
min=1 | |
max=10 | |
onchange={{action "changed" value="target.checked"}} > | |
<input type="text" | |
value={{currentValue}} | |
min=1 | |
max=10 | |
oninput={{action "changed" value="target.value"}} > | |
<form action="" onchange={{action "changed" value="target.value"}} > | |
<input type="radio" name="sex" value="friend">friend | |
<input type="radio" name="sex" value="foe">Foe | |
</form> | |
<select onchange={{action "changed" value="target.value"}}> | |
{{#each model.choices key="@identity" as |choice|}} | |
<option value={{choice}} selected={{is-equal value choice}}>{{choice}}</option> | |
{{/each}} | |
</select> | |
</script> | |
<script id="jsbin-javascript"> | |
App = Ember.Application.create({ | |
rootElement: '#app', | |
LOG_RESOLVER: true | |
}); | |
App.Router.map(function() { | |
}); | |
App.ApplicationRoute = Ember.Route.extend({ | |
model: function() { | |
return { | |
choices: [ | |
'friend', | |
'foe' | |
] | |
}; | |
}, | |
actions: { | |
error: function(error) { | |
log(error.message); | |
}, | |
changed: function(value) { | |
log('currentValue is: ' + value); | |
} | |
} | |
}); | |
function equalHelper(params) { | |
return params[0] === params[1]; | |
} | |
Ember.Handlebars.helper('is-equal', function(a, b){ | |
return a === b; | |
}); | |
App.ApplicationController = Ember.Controller.extend({ | |
actions: { | |
changed: function(val) { | |
this.get('target').send('changed', val); | |
} | |
} | |
}); | |
/* | |
$("input").on('change', function(e) { | |
log('Jq currentValue is: ' + e.target.value); | |
}); | |
*/ | |
Ember.onerror = function(error) { | |
log(error.stack); | |
}; | |
function log() { | |
var msg = [].slice.call(arguments).join(' '); | |
logs.insertBefore(document.createTextNode("\n" + msg), logs.firstChild); | |
} | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Ember Starter Kit</title> | |
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css"> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script> | |
<script src="http://builds.emberjs.com/tags/v1.13.3/ember.js"><\/script> | |
<script src="http://builds.emberjs.com/tags/v1.13.3/ember-template-compiler.js"><\/script> | |
</head> | |
<body> | |
<div id='app'></div> | |
<pre id="logs"></pre> | |
<script type="text/x-handlebars"> | |
<h2>Componentless Forms in ember</h2> | |
{{currentValue}} | |
<input type="range" | |
value={{currentValue}} | |
min=1 | |
max=10 | |
oninput={{action "changed" value="target.value"}} > | |
<input type="checkbox" | |
value={{currentValue}} | |
min=1 | |
max=10 | |
onchange={{action "changed" value="target.checked"}} > | |
<input type="text" | |
value={{currentValue}} | |
min=1 | |
max=10 | |
oninput={{action "changed" value="target.value"}} > | |
<form action="" onchange={{action "changed" value="target.value"}} > | |
<input type="radio" name="sex" value="friend">friend | |
<input type="radio" name="sex" value="foe">Foe | |
</form> | |
<select onchange={{action "changed" value="target.value"}}> | |
{{#each model.choices key="@identity" as |choice|}} | |
<option value={{choice}} selected={{is-equal value choice}}>{{choice}}</option> | |
{{/each}} | |
</select> | |
<\/script> | |
</body> | |
</html> | |
</script> | |
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */ | |
html, body { | |
margin: 20px; | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create({ | |
rootElement: '#app', | |
LOG_RESOLVER: true | |
}); | |
App.Router.map(function() { | |
}); | |
App.ApplicationRoute = Ember.Route.extend({ | |
model: function() { | |
return { | |
choices: [ | |
'friend', | |
'foe' | |
] | |
}; | |
}, | |
actions: { | |
error: function(error) { | |
log(error.message); | |
}, | |
changed: function(value) { | |
log('currentValue is: ' + value); | |
} | |
} | |
}); | |
function equalHelper(params) { | |
return params[0] === params[1]; | |
} | |
Ember.Handlebars.helper('is-equal', function(a, b){ | |
return a === b; | |
}); | |
App.ApplicationController = Ember.Controller.extend({ | |
actions: { | |
changed: function(val) { | |
this.get('target').send('changed', val); | |
} | |
} | |
}); | |
/* | |
$("input").on('change', function(e) { | |
log('Jq currentValue is: ' + e.target.value); | |
}); | |
*/ | |
Ember.onerror = function(error) { | |
log(error.stack); | |
}; | |
function log() { | |
var msg = [].slice.call(arguments).join(' '); | |
logs.insertBefore(document.createTextNode("\n" + msg), logs.firstChild); | |
}</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Put your CSS here */ | |
html, body { | |
margin: 20px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
App = Ember.Application.create({ | |
rootElement: '#app', | |
LOG_RESOLVER: true | |
}); | |
App.Router.map(function() { | |
}); | |
App.ApplicationRoute = Ember.Route.extend({ | |
model: function() { | |
return { | |
choices: [ | |
'friend', | |
'foe' | |
] | |
}; | |
}, | |
actions: { | |
error: function(error) { | |
log(error.message); | |
}, | |
changed: function(value) { | |
log('currentValue is: ' + value); | |
} | |
} | |
}); | |
function equalHelper(params) { | |
return params[0] === params[1]; | |
} | |
Ember.Handlebars.helper('is-equal', function(a, b){ | |
return a === b; | |
}); | |
App.ApplicationController = Ember.Controller.extend({ | |
actions: { | |
changed: function(val) { | |
this.get('target').send('changed', val); | |
} | |
} | |
}); | |
/* | |
$("input").on('change', function(e) { | |
log('Jq currentValue is: ' + e.target.value); | |
}); | |
*/ | |
Ember.onerror = function(error) { | |
log(error.stack); | |
}; | |
function log() { | |
var msg = [].slice.call(arguments).join(' '); | |
logs.insertBefore(document.createTextNode("\n" + msg), logs.firstChild); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment