Created
January 25, 2015 19:18
-
-
Save machristie/a1a8caaa260e2a6271fa to your computer and use it in GitHub Desktop.
Child View Example // source http://emberjs.jsbin.com/yegaqu
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>Child View Example</title> | |
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css"> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script> | |
<script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"></script> | |
<style id="jsbin-css"> | |
/* Put your CSS here */ | |
html, body { | |
margin: 20px; | |
} | |
.valid:before { | |
content:"✓"; | |
color: green; | |
} | |
.invalid:before { | |
content:"✗"; | |
color: red; | |
} | |
</style> | |
</head> | |
<body> | |
<script type="text/x-handlebars"> | |
<h2>Handling DOM Events in Child Views</h2> | |
{{outlet}} | |
</script> | |
<script type="text/x-handlebars" data-template-name="index"> | |
{{view "registrationForm"}} | |
</script> | |
<script type="text/x-handlebars" data-template-name="registrationForm"> | |
<p> | |
Username: | |
{{input id="username" type="text" value=username}} | |
{{#if showValidUsername}} | |
<span {{bind-attr class="validUsername:valid:invalid"}}/> | |
{{/if}} | |
</p> | |
<p> | |
Password: | |
{{input id="password" type="password" value=password}} | |
</p> | |
<p> | |
Confirm password: | |
{{input id="confirmPassword" type="password" value=confirmPassword}} | |
</p> | |
</script> | |
<script id="jsbin-javascript"> | |
App = Ember.Application.create(); | |
App.Router.map(function() { | |
// put your routes here | |
}); | |
App.IndexRoute = Ember.Route.extend({ | |
model: function() { | |
return {}; | |
} | |
}); | |
App.RegistrationFormView = Ember.View.extend({ | |
templateName: "registrationForm", | |
focusOut: function(e){ | |
console.log("focusOut", e.target); | |
if (e.target === document.getElementById('username')){ | |
console.log("focusOut event on username input"); | |
this.get('controller').send('validateUsername'); | |
} | |
} | |
}); | |
App.IndexController = Ember.ObjectController.extend({ | |
validUsername: null, | |
showValidUsername: function(){ | |
return this.get('validUsername') !== null; | |
}.property("validUsername"), | |
actions: { | |
validateUsername: function(){ | |
var username = this.get('username'); | |
this.set('validUsername', username !== 'foo'&& username !== 'bar'); | |
} | |
} | |
}); | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Child View Example</title> | |
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css"> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script> | |
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"><\/script> | |
<script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"><\/script> | |
</head> | |
<body> | |
<script type="text/x-handlebars"> | |
<h2>Handling DOM Events in Child Views</h2> | |
{{outlet}} | |
<\/script> | |
<script type="text/x-handlebars" data-template-name="index"> | |
{{view "registrationForm"}} | |
<\/script> | |
<script type="text/x-handlebars" data-template-name="registrationForm"> | |
<p> | |
Username: | |
{{input id="username" type="text" value=username}} | |
{{#if showValidUsername}} | |
<span {{bind-attr class="validUsername:valid:invalid"}}/> | |
{{/if}} | |
</p> | |
<p> | |
Password: | |
{{input id="password" type="password" value=password}} | |
</p> | |
<p> | |
Confirm password: | |
{{input id="confirmPassword" type="password" value=confirmPassword}} | |
</p> | |
<\/script> | |
</body> | |
</html> | |
</script> | |
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */ | |
html, body { | |
margin: 20px; | |
} | |
.valid:before { | |
content:"✓"; | |
color: green; | |
} | |
.invalid:before { | |
content:"✗"; | |
color: red; | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create(); | |
App.Router.map(function() { | |
// put your routes here | |
}); | |
App.IndexRoute = Ember.Route.extend({ | |
model: function() { | |
return {}; | |
} | |
}); | |
App.RegistrationFormView = Ember.View.extend({ | |
templateName: "registrationForm", | |
focusOut: function(e){ | |
console.log("focusOut", e.target); | |
if (e.target === document.getElementById('username')){ | |
console.log("focusOut event on username input"); | |
this.get('controller').send('validateUsername'); | |
} | |
} | |
}); | |
App.IndexController = Ember.ObjectController.extend({ | |
validUsername: null, | |
showValidUsername: function(){ | |
return this.get('validUsername') !== null; | |
}.property("validUsername"), | |
actions: { | |
validateUsername: function(){ | |
var username = this.get('username'); | |
this.set('validUsername', username !== 'foo'&& username !== 'bar'); | |
} | |
} | |
}); | |
</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; | |
} | |
.valid:before { | |
content:"✓"; | |
color: green; | |
} | |
.invalid:before { | |
content:"✗"; | |
color: red; | |
} |
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(); | |
App.Router.map(function() { | |
// put your routes here | |
}); | |
App.IndexRoute = Ember.Route.extend({ | |
model: function() { | |
return {}; | |
} | |
}); | |
App.RegistrationFormView = Ember.View.extend({ | |
templateName: "registrationForm", | |
focusOut: function(e){ | |
console.log("focusOut", e.target); | |
if (e.target === document.getElementById('username')){ | |
console.log("focusOut event on username input"); | |
this.get('controller').send('validateUsername'); | |
} | |
} | |
}); | |
App.IndexController = Ember.ObjectController.extend({ | |
validUsername: null, | |
showValidUsername: function(){ | |
return this.get('validUsername') !== null; | |
}.property("validUsername"), | |
actions: { | |
validateUsername: function(){ | |
var username = this.get('username'); | |
this.set('validUsername', username !== 'foo'&& username !== 'bar'); | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment