Skip to content

Instantly share code, notes, and snippets.

@visualjeff

visualjeff/index.html

Created June 8, 2015 23:10
Show Gist options
  • Save visualjeff/5eba4050d230d26617e6 to your computer and use it in GitHub Desktop.
Save visualjeff/5eba4050d230d26617e6 to your computer and use it in GitHub Desktop.
Download ZIP
Sample Component Form [ember 1.13.0 Component Form] // source http://jsbin.com/qatuga
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="[ember 1.13.0 Component Form]" />
<title>Sample Component Form</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://builds.emberjs.com/beta/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/beta/ember.debug.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<h2>A form using components:</h2>
{{outlet}}
{{view "foundation"}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#form-control model=model action="handler"}}
{{#label-control for="firstName"}}First Name:
{{focus-text-field id="firstName" value=model.firstName type="text" required="true"}}
<small class="error">first name required</small>
{{/label-control}}
{{#label-control for="lastName"}}Last Name:
{{text-field id="lastName" value=model.lastName type="text" required="true"}}
<small class="error">last name required</small>
{{/label-control}}
{{#label-control for="lastName"}}Gender:
{{select-field model=model choices=model.genderSelectfield.choices name=model.genderSelectfield.name className=model.genderSelectfield.className required="true"}}
<small class="error">Gender required</small>
{{/label-control}}
{{/form-control}}
</script>
<script type="text/x-handlebars" data-template-name="components/form-control">
<form {{action "submit" on="submit"}} data-abide>
{{yield}}
{{#submit-button disabled=isProcessing}}Save{{/submit-button}}
</form>
</script>
<script type="text/x-handlebars" data-template-name="components/label-control">
{{yield}}
</script>
<script type="text/x-handlebars" data-template-name="components/select-field">
<select name={{name}} class={{className}}>
{{#each choices key="choice" as |option|}}
<option value={{option.choice}}>{{option.choice}}</option>
{{/each}}
</select>
</script>
<script type="text/x-handlebars" data-template-name="components/submit-button">
{{yield}}
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.FoundationView = Ember.View.reopen({
didInsertElement : function(){
this._super();
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
},
afterRenderEvent : function(){
$(document).foundation();
}
});
App.IndexRoute = Ember.Route.extend({
model: function () {
return { firstName: "Blob", lastName: "Johnson",
genderSelectfield: { name: 'gender',
className: 'dropdown',
choices: [
{ choice: 'Choose One' }, { choice: 'Male' }, { choice: 'Female' }
]
},
gender: ""
};
},
actions: {
handler: function(params) {
alert("handler says: " + params.firstName + " " + params.lastName + " " + params.gender);
}
}
});
/*
App.TouchEventHandlers = Ember.Mixin.create({
touchStart: function(event){},
touchMove: function(event){},
touchEnd: function(event){},
touchCancel: function(event){}
});
*/
/*
App.KeyEventHandlers = Ember.Mixin.create({
keyDown: function(event){},
keyUp: function(event){},
keyPress: function(event){}
});
*/
/*
App.MouseEventHandlers = Ember.Mixin.create({
mouseDown: function(event){},
mouseUp: function(event){},
contextMenu: function(event){},
click: function(event){},
doubleClick: function(event){},
mouseMove: function(event){},
focusIn: function(event){},
focusOut: function(event){},
mouseEnter: function(event){},
mouseLeave: function(event){}
});
*/
/*
App.HTML5EventHandlers = Ember.Mixin.create({
dragStart: function(event){},
drag: function(event){},
dragEnter: function(event){},
dragLeave: function(event){},
dragOver: function(event){},
dragEnd: function(event){},
drop: function(event){}
});
*/
App.FormEventHandlers = Ember.Mixin.create({
//Fires after submit action handler
//submit: function(event) {},
//change: function(event) {},
//focusIn: function(event){},
//focusOut: function(event) {},
//input: function(event) {}
});
App.FormComponentEventHandlers = Ember.Mixin.create({
//didInsertElement: function(event) {},
//parentViewDidChange: function(event){},
//willClearRender: function(event){},
//willDestroyElement: function(event){},
//willInsertElement: function(event){},
});
App.FormControlComponent = Ember.Component.extend(App.FormEventHandlers, App.FormComponentEventHandlers, {
isProcessing: false,
actions: {
submit: function() {
this.set('isProcessing', true);
var model = this.get('model');
//Remove properties associated with genderSelectField
delete model.genderSelectfield;
//alert(JSON.stringify(model));
this.sendAction('action', model);
}
}
});
App.LabelControlControlComponent = Ember.Component.extend({
tagName: "label",
//Concatinating properties
attributeBindings: ["for"]
});
App.ButtonEventHandler = Ember.Mixin.create({
//click: function(event) { }
});
App.SelectEventHandler = Ember.Mixin.create({
//click: function(event) { }
});
//Use textfields like a component
App.TextFieldComponent = Ember.TextField.extend({
//concatinating property. Add on abide validation attributes
attributeBindings: ["data-abide-validator"],
});
//Use textfields like a component
App.FocusTextFieldComponent = App.TextFieldComponent.extend(App.FormComponentEventHandlers, {
didInsertElement: function() {
this.$().focus(); // jquery
}
});
App.SelectFieldComponent = Ember.Component.extend(App.FormComponentEventHandlers,
{
//Concatinating properties
attributeBindings: ["required"],
change: function(event) {
this.set('selected', event.target.value);
this.get('model').gender = this.get('selected');
}
});
App.SubmitButtonComponent = Ember.Component.extend(App.ButtonEventHandler, {
tagName: "button",
//Concatinating properties
classNames: ["small", "radius"],
//Concatinating properties
attributeBindings: ["disabled", "name", "type", "value"],
type: "submit",
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.FoundationView = Ember.View.reopen({
didInsertElement : function(){
this._super();
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
},
afterRenderEvent : function(){
$(document).foundation();
}
});
App.IndexRoute = Ember.Route.extend({
model: function () {
return { firstName: "Blob", lastName: "Johnson",
genderSelectfield: { name: 'gender',
className: 'dropdown',
choices: [
{ choice: 'Choose One' }, { choice: 'Male' }, { choice: 'Female' }
]
},
gender: ""
};
},
actions: {
handler: function(params) {
alert("handler says: " + params.firstName + " " + params.lastName + " " + params.gender);
}
}
});
/*
App.TouchEventHandlers = Ember.Mixin.create({
touchStart: function(event){},
touchMove: function(event){},
touchEnd: function(event){},
touchCancel: function(event){}
});
*/
/*
App.KeyEventHandlers = Ember.Mixin.create({
keyDown: function(event){},
keyUp: function(event){},
keyPress: function(event){}
});
*/
/*
App.MouseEventHandlers = Ember.Mixin.create({
mouseDown: function(event){},
mouseUp: function(event){},
contextMenu: function(event){},
click: function(event){},
doubleClick: function(event){},
mouseMove: function(event){},
focusIn: function(event){},
focusOut: function(event){},
mouseEnter: function(event){},
mouseLeave: function(event){}
});
*/
/*
App.HTML5EventHandlers = Ember.Mixin.create({
dragStart: function(event){},
drag: function(event){},
dragEnter: function(event){},
dragLeave: function(event){},
dragOver: function(event){},
dragEnd: function(event){},
drop: function(event){}
});
*/
App.FormEventHandlers = Ember.Mixin.create({
//Fires after submit action handler
//submit: function(event) {},
//change: function(event) {},
//focusIn: function(event){},
//focusOut: function(event) {},
//input: function(event) {}
});
App.FormComponentEventHandlers = Ember.Mixin.create({
//didInsertElement: function(event) {},
//parentViewDidChange: function(event){},
//willClearRender: function(event){},
//willDestroyElement: function(event){},
//willInsertElement: function(event){},
});
App.FormControlComponent = Ember.Component.extend(App.FormEventHandlers, App.FormComponentEventHandlers, {
isProcessing: false,
actions: {
submit: function() {
this.set('isProcessing', true);
var model = this.get('model');
//Remove properties associated with genderSelectField
delete model.genderSelectfield;
//alert(JSON.stringify(model));
this.sendAction('action', model);
}
}
});
App.LabelControlControlComponent = Ember.Component.extend({
tagName: "label",
//Concatinating properties
attributeBindings: ["for"]
});
App.ButtonEventHandler = Ember.Mixin.create({
//click: function(event) { }
});
App.SelectEventHandler = Ember.Mixin.create({
//click: function(event) { }
});
//Use textfields like a component
App.TextFieldComponent = Ember.TextField.extend({
//concatinating property. Add on abide validation attributes
attributeBindings: ["data-abide-validator"],
});
//Use textfields like a component
App.FocusTextFieldComponent = App.TextFieldComponent.extend(App.FormComponentEventHandlers, {
didInsertElement: function() {
this.$().focus(); // jquery
}
});
App.SelectFieldComponent = Ember.Component.extend(App.FormComponentEventHandlers,
{
//Concatinating properties
attributeBindings: ["required"],
change: function(event) {
this.set('selected', event.target.value);
this.get('model').gender = this.get('selected');
}
});
App.SubmitButtonComponent = Ember.Component.extend(App.ButtonEventHandler, {
tagName: "button",
//Concatinating properties
classNames: ["small", "radius"],
//Concatinating properties
attributeBindings: ["disabled", "name", "type", "value"],
type: "submit",
});</script></body>
</html>
Raw
jsbin.qatuga.js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.FoundationView = Ember.View.reopen({
didInsertElement : function(){
this._super();
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
},
afterRenderEvent : function(){
$(document).foundation();
}
});
App.IndexRoute = Ember.Route.extend({
model: function () {
return { firstName: "Blob", lastName: "Johnson",
genderSelectfield: { name: 'gender',
className: 'dropdown',
choices: [
{ choice: 'Choose One' }, { choice: 'Male' }, { choice: 'Female' }
]
},
gender: ""
};
},
actions: {
handler: function(params) {
alert("handler says: " + params.firstName + " " + params.lastName + " " + params.gender);
}
}
});
/*
App.TouchEventHandlers = Ember.Mixin.create({
touchStart: function(event){},
touchMove: function(event){},
touchEnd: function(event){},
touchCancel: function(event){}
});
*/
/*
App.KeyEventHandlers = Ember.Mixin.create({
keyDown: function(event){},
keyUp: function(event){},
keyPress: function(event){}
});
*/
/*
App.MouseEventHandlers = Ember.Mixin.create({
mouseDown: function(event){},
mouseUp: function(event){},
contextMenu: function(event){},
click: function(event){},
doubleClick: function(event){},
mouseMove: function(event){},
focusIn: function(event){},
focusOut: function(event){},
mouseEnter: function(event){},
mouseLeave: function(event){}
});
*/
/*
App.HTML5EventHandlers = Ember.Mixin.create({
dragStart: function(event){},
drag: function(event){},
dragEnter: function(event){},
dragLeave: function(event){},
dragOver: function(event){},
dragEnd: function(event){},
drop: function(event){}
});
*/
App.FormEventHandlers = Ember.Mixin.create({
//Fires after submit action handler
//submit: function(event) {},
//change: function(event) {},
//focusIn: function(event){},
//focusOut: function(event) {},
//input: function(event) {}
});
App.FormComponentEventHandlers = Ember.Mixin.create({
//didInsertElement: function(event) {},
//parentViewDidChange: function(event){},
//willClearRender: function(event){},
//willDestroyElement: function(event){},
//willInsertElement: function(event){},
});
App.FormControlComponent = Ember.Component.extend(App.FormEventHandlers, App.FormComponentEventHandlers, {
isProcessing: false,
actions: {
submit: function() {
this.set('isProcessing', true);
var model = this.get('model');
//Remove properties associated with genderSelectField
delete model.genderSelectfield;
//alert(JSON.stringify(model));
this.sendAction('action', model);
}
}
});
App.LabelControlControlComponent = Ember.Component.extend({
tagName: "label",
//Concatinating properties
attributeBindings: ["for"]
});
App.ButtonEventHandler = Ember.Mixin.create({
//click: function(event) { }
});
App.SelectEventHandler = Ember.Mixin.create({
//click: function(event) { }
});
//Use textfields like a component
App.TextFieldComponent = Ember.TextField.extend({
//concatinating property. Add on abide validation attributes
attributeBindings: ["data-abide-validator"],
});
//Use textfields like a component
App.FocusTextFieldComponent = App.TextFieldComponent.extend(App.FormComponentEventHandlers, {
didInsertElement: function() {
this.$().focus(); // jquery
}
});
App.SelectFieldComponent = Ember.Component.extend(App.FormComponentEventHandlers,
{
//Concatinating properties
attributeBindings: ["required"],
change: function(event) {
this.set('selected', event.target.value);
this.get('model').gender = this.get('selected');
}
});
App.SubmitButtonComponent = Ember.Component.extend(App.ButtonEventHandler, {
tagName: "button",
//Concatinating properties
classNames: ["small", "radius"],
//Concatinating properties
attributeBindings: ["disabled", "name", "type", "value"],
type: "submit",
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment