jfsiii/add_profile.js

## 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);
});

## 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>

## 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);
});

## 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
  });
});

## 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);
});
	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);
	});
	<!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>
	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);
	});
	// 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
	});
	});
	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);
	});