Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 15, 2016 18:44
Show Gist options
  • Save anonymous/6c6a9c6d0413c05218805b9d2ebb6c90 to your computer and use it in GitHub Desktop.
Save anonymous/6c6a9c6d0413c05218805b9d2ebb6c90 to your computer and use it in GitHub Desktop.
Download ZIP
Ember Starter Kit // source http://jsbin.com/febafarova
Raw
index.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/canary/ember.debug.js"></script>
<script src="http://builds.emberjs.com/canary/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"
selected={{is-equal currentValue "friend"}}
value="friend">friend
<input type="radio"
name="sex"
value="foe"
selected={{is-equal currentValue "friend"}}>
Foe
</form>
{{currentValue}}
<select onchange={{action "changed" value="target.value"}}>
{{#each model.choices key="@identity" as |choice|}}
<option value={{choice}} selected={{is-equal currentValue 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.set('currentValue', val);
this.get('target').send('changed', val);
}
}
});
$("input").on('change', function(e) {
log('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/canary/ember.debug.js"><\/script>
<script src="http://builds.emberjs.com/canary/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"
selected={{is-equal currentValue "friend"}}
value="friend">friend
<input type="radio"
name="sex"
value="foe"
selected={{is-equal currentValue "friend"}}>
Foe
</form>
{{currentValue}}
<select onchange={{action "changed" value="target.value"}}>
{{#each model.choices key="@identity" as |choice|}}
<option value={{choice}} selected={{is-equal currentValue 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.set('currentValue', val);
this.get('target').send('changed', val);
}
}
});
$("input").on('change', function(e) {
log('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>
Raw
jsbin.febafarova.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.febafarova.js
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.set('currentValue', val);
this.get('target').send('changed', val);
}
}
});
$("input").on('change', function(e) {
log('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