hatched/index.html Secret

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="container"></div>
  <button>change</button>
  <div class="mv">Model Values:</div>
  <div class="values"></div>
</body>
</html>

## main.js
YUI().use('node', 'view', 'model', 'event-valuechange', function(Y) {

  var myModel = new Y.Model({
    name: 'frodo',
    description: 'hobbit'
  });

  function modelBoundView() {}

  modelBoundView.prototype = {

    _boundHandlers: [],

    _bindElements: function() {
      var model = this.get('model'),
          container = this.get('container');

      Y.Object.each(this.bound, function(val, key) {
        var ele = container.one(key);
        this._boundHandlers.push(
            ele.on('valueChange', this._updateBoundModel, this, val));

        this._boundHandlers.push(
            model.on(val+'Change', this._updateBoundElement, this, ele));
        this._updateBoundElement(null, ele, val);
      }, this);
    },

    _updateBoundElement: function(e, ele, val) {
      var mVal = "";

      mVal = val ? this.get('model').get(val) : e.newVal;

      if (ele._node.value === undefined) {
        ele.setHTML(mVal);
      } else if (typeof ele._node.value === 'string') {
        ele.set('value', mVal);
      }
    },

    _updateBoundModel: function(e, attr) {
      this.get('model').set(attr, e.newVal);
    },

    destructor: function() {
      this._boundHandlers.forEach(function(handler) {
        handler.detach();
      });
    }
  };

  Y.ModelBoundView = modelBoundView;

  var MyView = Y.Base.create('my-view', Y.View, [Y.ModelBoundView], {

    template: '<input type="text" name="foo" value="myname"/><span class="description">Description</span>',

    bound: {
      'input[name=foo]': 'name',
      'span.description': 'description'
    },

    render: function() {
      var container = this.get('container');
      container.setHTML(this.template);

      // Because there is no after render hook with view
      // we need to manually call it.
      this._bindElements();
    }

  });

  var myView = new MyView({
    container: Y.one('.container'),
    model: myModel
  }).render();

  Y.one('button').on('click', function() {
    myModel.setAttrs({
      'name': 'sam',
      'description': 'hobbit too'
    });
  });

  myModel.on('change', showModelDetails);

  showModelDetails();

  function showModelDetails() {
    Y.one('.values').setHTML(
      'name: ' + myModel.get('name') + '<br>' +
      'desciption: ' + myModel.get('description')
    );
  }

});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div class="container"></div>
	<button>change</button>
	<div class="mv">Model Values:</div>
	<div class="values"></div>
	</body>
	</html>
	YUI().use('node', 'view', 'model', 'event-valuechange', function(Y) {

	var myModel = new Y.Model({
	name: 'frodo',
	description: 'hobbit'
	});

	function modelBoundView() {}

	modelBoundView.prototype = {

	_boundHandlers: [],

	_bindElements: function() {
	var model = this.get('model'),
	container = this.get('container');

	Y.Object.each(this.bound, function(val, key) {
	var ele = container.one(key);
	this._boundHandlers.push(
	ele.on('valueChange', this._updateBoundModel, this, val));

	this._boundHandlers.push(
	model.on(val+'Change', this._updateBoundElement, this, ele));
	this._updateBoundElement(null, ele, val);
	}, this);
	},

	_updateBoundElement: function(e, ele, val) {
	var mVal = "";

	mVal = val ? this.get('model').get(val) : e.newVal;

	if (ele._node.value === undefined) {
	ele.setHTML(mVal);
	} else if (typeof ele._node.value === 'string') {
	ele.set('value', mVal);
	}
	},

	_updateBoundModel: function(e, attr) {
	this.get('model').set(attr, e.newVal);
	},

	destructor: function() {
	this._boundHandlers.forEach(function(handler) {
	handler.detach();
	});
	}
	};

	Y.ModelBoundView = modelBoundView;

	var MyView = Y.Base.create('my-view', Y.View, [Y.ModelBoundView], {

	template: '<input type="text" name="foo" value="myname"/><span class="description">Description</span>',

	bound: {
	'input[name=foo]': 'name',
	'span.description': 'description'
	},

	render: function() {
	var container = this.get('container');
	container.setHTML(this.template);

	// Because there is no after render hook with view
	// we need to manually call it.
	this._bindElements();
	}

	});

	var myView = new MyView({
	container: Y.one('.container'),
	model: myModel
	}).render();

	Y.one('button').on('click', function() {
	myModel.setAttrs({
	'name': 'sam',
	'description': 'hobbit too'
	});
	});

	myModel.on('change', showModelDetails);

	showModelDetails();

	function showModelDetails() {
	Y.one('.values').setHTML(
	'name: ' + myModel.get('name') + '<br>' +
	'desciption: ' + myModel.get('description')
	);
	}

	});