Skip to content

Instantly share code, notes, and snippets.

@jfsiii

jfsiii/add_profile.js

Forked from johnwesonga/add_profile.js
Last active August 29, 2015 13:57
Show Gist options
  • Save jfsiii/9796425 to your computer and use it in GitHub Desktop.
Save jfsiii/9796425 to your computer and use it in GitHub Desktop.
Download ZIP
Example flight component. From [Flight Group](https://groups.google.com/forum/#!topic/twitter-flight/x2HTNi-v8cU)
Raw
add_profile.js
define('components/ui/add_profile', function(require) {
'use strict';
/**
* Module dependencies
*/
// var defineComponent = require('flight/lib/component');
// Using flight global from standalone lib for demo purposes.
var defineComponent = flight.component;
/**
* Module function
*/
function addProfile() {
this.defaultAttrs({
// be explicit. include `selector` in the property name
firstnameSelector: '[name=firstname]',
lastnameSelector: '[name=lastname]',
requestEvent: 'uiAddProfile'
});
this.after('initialize', function() {
// use `after` to tie your logic to an event, rather than a specific flow
this.after('haveNewData', this.clearForm);
// don't act outside this component
this.on('submit', this.haveNewData);
console.log('components/ui/add_profile observes `submit` on', this.node);
});
this.haveNewData = function haveNewData(e) {
e.preventDefault();
var firstname = this.select('firstnameSelector');
var lastname = this.select('lastnameSelector');
var profileData = {
firstname: firstname.val().trim(),
lastname: lastname.val().trim(),
};
console.log('trigger', this.attr.requestEvent, profileData);
this.trigger(this.attr.requestEvent, profileData);
};
this.clearForm = function clearForm(e) {
console.log('clear form');
var $fname = this.select('firstnameSelector');
$fname.val('');
this.select('lastnameSelector').val('');
$fname.focus();
};
}
/**
* Module exports
*/
return defineComponent(addProfile);
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>helloworld</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<h2>User Profile</h2>
<form id="userForm">
First name:
<input type="text" name="firstname" />
<br />Last name:
<input type="text" name="lastname" />
<br />
<input type="submit" value="Submit" id="btnAddUserProfile" />
</form>
<br />
<ul id="userProfileList"></ul>
<h2>Admin Profile</h2>
<form id="adminForm">
First name:
<input type="text" name="firstname" />
<br />Last name:
<input type="text" name="lastname" />
<br />
<input type="submit" value="Submit" id="btnAddAdminProfile" />
</form>
<br />
<ul id="adminProfileList"></ul>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://flightjs.github.io/release/latest/flight.js"></script>
<script data-main="main" data-require="require.js@*" data-semver="2.1.4" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.4/require.js"></script>
</body>
</html>
Raw
list_profile.js
define('components/ui/list_profile', [], function(requre) {
'use strict';
/**
* Module dependencies
*/
// var defineComponent = require('flight/lib/component');
// Using flight global from standalone lib for demo purposes.
var defineComponent = flight.component;
/**
* Module function
*/
function listProfile() {
this.defaultAttrs({
updatedEvent: 'dataAddedProfile'
});
this.after('initialize', function () {
this.on(document, this.attr.updatedEvent, this.appendProfile);
console.log('components/ui/list_profile observes', this.attr.updatedEvent, 'on', document);
});
// call it `appendProfile` because that's what it is doing
// I'd expect `listProfiles` to take an array of objects and render them
this.appendProfile = function(e, data){
this.$node.append('<li>' + data.firstname + ' ' + data.lastname + '</li>');
};
}
/**
* Module exports
*/
return defineComponent(listProfile);
});
Raw
main.js
// Code goes here
define('main', function(require){
'use strict';
console.log('main');
var requestUserAdd = 'uiRequestAddUserProfile';
var userWasAdded = 'dataAddedUserProfile'
console.log('setup user profiles');
require('components/ui/add_profile').attachTo('#userForm', {
requestEvent: requestUserAdd
});
require('components/data/profile').attachTo(document, {
requestEvent: requestUserAdd,
responseEvent: userWasAdded
});
require('components/ui/list_profile').attachTo('#userProfileList', {
updatedEvent: userWasAdded
});
var requestAdminAdd = 'uiRequestAddAdminProfile';
var adminWasAdded = 'dataAddedAdminProfile'
console.log('setup admin profiles');
require('components/ui/add_profile').attachTo('#adminForm', {
requestEvent: requestAdminAdd
});
require('components/data/profile').attachTo(document, {
requestEvent: requestAdminAdd,
responseEvent: adminWasAdded
});
require('components/ui/list_profile').attachTo('#adminProfileList', {
updatedEvent: adminWasAdded
});
});
Raw
profile.js
define('components/data/profile', [], function(require) {
'use strict';
/**
* Module dependencies
*/
// var defineComponent = require('flight/lib/component');
// Using flight global from standalone lib for demo purposes.
var defineComponent = flight.component;
/**
* Module function
*/
function profile() {
this.defaultAttrs({
requestEvent: 'uiAddProfile',
responseEvent: 'dataAddedProfile'
});
this.after('initialize', function initialize() {
this.on(document, this.attr.requestEvent, this.addProfile);
console.log('components/data/profile observes', this.attr.requestEvent, 'on', document);
});
this.addProfile = function addProfile(e, data) {
console.log('got profile', data);
// do stuff here (validate, make XHR requests, etc)
// when it's been successfully added, announce
// I changed from `dataAddProfile` to `dataAddedProfile`
// to make it clear that this is event has already happened.
// You're not asking the data service to create a profile (`uiAddProfile`)
// You're announcing that a profile *has been added*
// the naming conventions are entirely up to you, that's just how I think of it
var profileData = {
firstname: data.firstname,
lastname: data.lastname
};
console.log(this.attr.responseEvent, profileData);
this.trigger(this.attr.responseEvent, profileData);
};
}
/**
* Module exports
*/
return defineComponent(profile);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment