PhazeonPhoenix/index.html

## index.html
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
  <style>
    body {
      background: #fff;
      margin: 0;
      padding: 0;
    }

    .container {
      padding: 0;
      margin: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .display-container {
      width: 100%;
      display: flex;
      align-items: center;
      min-height: 0;
    }

    .bor-1-slate {
      border: 1px solid #ddd;
      border-radius: 5px;
    }

    .mar-v-10 {
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .pad-5 {
      padding: 5px;
    }

    .pad-v-5 {
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .pad-20 {
      padding: 20px;
    }

    .fsize-14 {
      font-size: 14px;
    }
  </style>
</head>
<body>

  <div id="app" class="container">

  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/3.5.1/backbone.marionette.js"></script>
<script type="text/babel">
  /*
   ********** Backbone Marionette Shopping Cart
   * This site consists of a simple, two input form.
   * You are being requested to update this form in three ways:
   *   1. Persist input values to a model for later saving
   *   2. Add a button with the text 'Clear Form'
   *   3. Clicking the button should reset the form inputs to their initial values
   *        (e.g. the values shown when the form is loaded)
   */

  const FormModel = Backbone.Model.extend({});

  const FormInput = Marionette.View.extend({
    /**
     *
     */
    className: 'pad-v-5',
    /**
     *
     */
    templateContext() {
      const value = this.options.value;
      const modelValue = this.model.get(this.options.myProp);
      return {
        value: modelValue || value
      };
    },
    /**
     *
     */
    ui: {
      myInput: 'input'
    },
    template: _.template(`
      <input class="fsize-14 pad-5" value="<%= value %>" />
    `),
    events: {
      'keyup @ui.myInput': 'onKeyUp'
    },
    onRender: function() {
      const model = this.options.model;
      var keyname = 'change:' + this.options.myProp;
      model.on(keyname, 'onModelChange');
    },
    onDestroy: function() {
      const model = this.options.model;
      var keyname = 'change:' + this.options.myProp;
      model.off(keyname, 'onModelChange');
    },
    onKeyUp: function() {
      const model = this.options.model;
      const myProp = this.options.myProp;
      console.log(model);
      console.log(myProp);
      console.log(this.ui.myInput.val());
      model.set(myProp, this.ui.myInput.val());
    },
    onModelChange: function() {
      const model = this.options.model;
      const myProp = this.options.myProp;
      console.log(model);
      console.log(myProp);
      console.log(this.ui.myInput.val());
      this.ui.myInput.val(model.get(myProp));
    }
  });

  const Form = Marionette.View.extend({
    /**
     *
     */
    className: 'display-container pad-20 bor-1-slate',
    events: {
      '.clearForm click': 'onClearFormClick'
    },
    /**
     *
     */
    regions: {
      input1: '[data-region=input1]',
      input2: '[data-region=input2]'
    },
    /**
     *
     */
    template: _.template(`
      <form>
        <div data-region="input1"></div>
        <div data-region="input2"></div>
        <button class="clearForm">Reset Form</button>
      </form>
    `),
    onClearFormClick() {
      const model = this.options.model;
      model.set('input1', 'My First Value');
      model.set('input2', 'My Second Value');
    },
    /**
     *
     */
    onRender() {
      const model = this.options.model;
      this.showChildView('input1', new FormInput({
        value: 'My First Value',
        model: model,
        myProp: 'input1'
      }));
      this.showChildView('input2', new FormInput({
        value: 'My Second Value',
        model: model,
        myProp: 'input2'
      }));
    }
  });

  const App = Marionette.Application.extend({
    /**
     *
     */
    region: '#app',
    /**
     *
     */
    onStart: function() {
      const formModel = new FormModel();
      this.showView(
        new Form({model: formModel})
      );
    }
  });

  const app = new App();
  app.start();

</script>
</body>
</html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
	<style>
	body {
	background: #fff;
	margin: 0;
	padding: 0;
	}

	.container {
	padding: 0;
	margin: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.display-container {
	width: 100%;
	display: flex;
	align-items: center;
	min-height: 0;
	}

	.bor-1-slate {
	border: 1px solid #ddd;
	border-radius: 5px;
	}

	.mar-v-10 {
	margin-top: 10px;
	margin-bottom: 10px;
	}
	.pad-5 {
	padding: 5px;
	}

	.pad-v-5 {
	padding-top: 5px;
	padding-bottom: 5px;
	}

	.pad-20 {
	padding: 20px;
	}

	.fsize-14 {
	font-size: 14px;
	}
	</style>
	</head>
	<body>

	<div id="app" class="container">

	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/3.5.1/backbone.marionette.js"></script>
	<script type="text/babel">
	/*
	********** Backbone Marionette Shopping Cart
	* This site consists of a simple, two input form.
	* You are being requested to update this form in three ways:
	* 1. Persist input values to a model for later saving
	* 2. Add a button with the text 'Clear Form'
	* 3. Clicking the button should reset the form inputs to their initial values
	* (e.g. the values shown when the form is loaded)
	*/

	const FormModel = Backbone.Model.extend({});

	const FormInput = Marionette.View.extend({
	/**
	*
	*/
	className: 'pad-v-5',
	/**
	*
	*/
	templateContext() {
	const value = this.options.value;
	const modelValue = this.model.get(this.options.myProp);
	return {
	value: modelValue \|\| value
	};
	},
	/**
	*
	*/
	ui: {
	myInput: 'input'
	},
	template: _.template(`
	<input class="fsize-14 pad-5" value="<%= value %>" />
	`),
	events: {
	'keyup @ui.myInput': 'onKeyUp'
	},
	onRender: function() {
	const model = this.options.model;
	var keyname = 'change:' + this.options.myProp;
	model.on(keyname, 'onModelChange');
	},
	onDestroy: function() {
	const model = this.options.model;
	var keyname = 'change:' + this.options.myProp;
	model.off(keyname, 'onModelChange');
	},
	onKeyUp: function() {
	const model = this.options.model;
	const myProp = this.options.myProp;
	console.log(model);
	console.log(myProp);
	console.log(this.ui.myInput.val());
	model.set(myProp, this.ui.myInput.val());
	},
	onModelChange: function() {
	const model = this.options.model;
	const myProp = this.options.myProp;
	console.log(model);
	console.log(myProp);
	console.log(this.ui.myInput.val());
	this.ui.myInput.val(model.get(myProp));
	}
	});

	const Form = Marionette.View.extend({
	/**
	*
	*/
	className: 'display-container pad-20 bor-1-slate',
	events: {
	'.clearForm click': 'onClearFormClick'
	},
	/**
	*
	*/
	regions: {
	input1: '[data-region=input1]',
	input2: '[data-region=input2]'
	},
	/**
	*
	*/
	template: _.template(`
	<form>
	<div data-region="input1"></div>
	<div data-region="input2"></div>
	<button class="clearForm">Reset Form</button>
	</form>
	`),
	onClearFormClick() {
	const model = this.options.model;
	model.set('input1', 'My First Value');
	model.set('input2', 'My Second Value');
	},
	/**
	*
	*/
	onRender() {
	const model = this.options.model;
	this.showChildView('input1', new FormInput({
	value: 'My First Value',
	model: model,
	myProp: 'input1'
	}));
	this.showChildView('input2', new FormInput({
	value: 'My Second Value',
	model: model,
	myProp: 'input2'
	}));
	}
	});

	const App = Marionette.Application.extend({
	/**
	*
	*/
	region: '#app',
	/**
	*
	*/
	onStart: function() {
	const formModel = new FormModel();
	this.showView(
	new Form({model: formModel})
	);
	}
	});

	const app = new App();
	app.start();

	</script>
	</body>
	</html>