mitsuruog/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="knockout.jsでFRPサンプル1">
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.24/rx.all.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input type="email" name="email" id="email">
  <div class="results"></div>
<script id="jsbin-javascript">
function ViewModel() {
 this.email = observable();
}

// observer
// 指定の値を観測して、変化があったらNotifyを送る
function observable() {
  var value;
  var module = function(newValue) {
    if(typeof(newValue) === 'undefined') {
      // getter
      return value;
    } else {
      // setter
      value = newValue;
      module.valueChanged();
    }
  };
  module.valueChanged = function() {
    // subscriberに通知
    module.subscriber(value);
  };
  return module;
}

// ViewModelとDOMをバインドする
function bindViewModel(vm) {
  // vmのemailがpropertyNameとして受け取れる
  var propertyNames = Object.getOwnPropertyNames(vm);
  propertyNames.forEach(function(propertyName) {
    // viewというか観測対象のcomponentかな。。。
    var view = document.getElementById(propertyNames);
    var property = vm[propertyNames];
    // ViewModel -> View
    property.subscriber = function(newValue) {
      view.value = newValue;
    };
    // View -> ViewModel
    view.addEventListener('input', function(e) {
      property(e.target.value);
    });
  });
}

var vm = new ViewModel();
bindViewModel(vm);
vm.email('mitsuru.ogawa.jp@gmail.com');
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="knockout.jsでFRPサンプル1">
<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.24/rx.all.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input type="email" name="email" id="email">
  <div class="results"></div>
</body>
</html></script>


<script id="jsbin-source-javascript" type="text/javascript">function ViewModel() {
 this.email = observable();
}

// observer
// 指定の値を観測して、変化があったらNotifyを送る
function observable() {
  var value;
  var module = function(newValue) {
    if(typeof(newValue) === 'undefined') {
      // getter
      return value;
    } else {
      // setter
      value = newValue;
      module.valueChanged();
    }
  };
  module.valueChanged = function() {
    // subscriberに通知
    module.subscriber(value);
  };
  return module;
}

// ViewModelとDOMをバインドする
function bindViewModel(vm) {
  // vmのemailがpropertyNameとして受け取れる
  var propertyNames = Object.getOwnPropertyNames(vm);
  propertyNames.forEach(function(propertyName) {
    // viewというか観測対象のcomponentかな。。。
    var view = document.getElementById(propertyNames);
    var property = vm[propertyNames];
    // ViewModel -> View
    property.subscriber = function(newValue) {
      view.value = newValue;
    };
    // View -> ViewModel
    view.addEventListener('input', function(e) {
      property(e.target.value);
    });
  });
}

var vm = new ViewModel();
bindViewModel(vm);
vm.email('mitsuru.ogawa.jp@gmail.com');</script></body>
</html>

## jsbin.fupacu.js
function ViewModel() {
 this.email = observable();
}

// observer
// 指定の値を観測して、変化があったらNotifyを送る
function observable() {
  var value;
  var module = function(newValue) {
    if(typeof(newValue) === 'undefined') {
      // getter
      return value;
    } else {
      // setter
      value = newValue;
      module.valueChanged();
    }
  };
  module.valueChanged = function() {
    // subscriberに通知
    module.subscriber(value);
  };
  return module;
}

// ViewModelとDOMをバインドする
function bindViewModel(vm) {
  // vmのemailがpropertyNameとして受け取れる
  var propertyNames = Object.getOwnPropertyNames(vm);
  propertyNames.forEach(function(propertyName) {
    // viewというか観測対象のcomponentかな。。。
    var view = document.getElementById(propertyNames);
    var property = vm[propertyNames];
    // ViewModel -> View
    property.subscriber = function(newValue) {
      view.value = newValue;
    };
    // View -> ViewModel
    view.addEventListener('input', function(e) {
      property(e.target.value);
    });
  });
}

var vm = new ViewModel();
bindViewModel(vm);
vm.email('mitsuru.ogawa.jp@gmail.com');
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="knockout.jsでFRPサンプル1">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.24/rx.all.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<input type="email" name="email" id="email">
	<div class="results"></div>
	<script id="jsbin-javascript">
	function ViewModel() {
	this.email = observable();
	}

	// observer
	// 指定の値を観測して、変化があったらNotifyを送る
	function observable() {
	var value;
	var module = function(newValue) {
	if(typeof(newValue) === 'undefined') {
	// getter
	return value;
	} else {
	// setter
	value = newValue;
	module.valueChanged();
	}
	};
	module.valueChanged = function() {
	// subscriberに通知
	module.subscriber(value);
	};
	return module;
	}

	// ViewModelとDOMをバインドする
	function bindViewModel(vm) {
	// vmのemailがpropertyNameとして受け取れる
	var propertyNames = Object.getOwnPropertyNames(vm);
	propertyNames.forEach(function(propertyName) {
	// viewというか観測対象のcomponentかな。。。
	var view = document.getElementById(propertyNames);
	var property = vm[propertyNames];
	// ViewModel -> View
	property.subscriber = function(newValue) {
	view.value = newValue;
	};
	// View -> ViewModel
	view.addEventListener('input', function(e) {
	property(e.target.value);
	});
	});
	}

	var vm = new ViewModel();
	bindViewModel(vm);
	vm.email('mitsuru.ogawa.jp@gmail.com');
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="knockout.jsでFRPサンプル1">
	<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.24/rx.all.js"><\/script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"><\/script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<input type="email" name="email" id="email">
	<div class="results"></div>
	</body>
	</html></script>


	<script id="jsbin-source-javascript" type="text/javascript">function ViewModel() {
	this.email = observable();
	}

	// observer
	// 指定の値を観測して、変化があったらNotifyを送る
	function observable() {
	var value;
	var module = function(newValue) {
	if(typeof(newValue) === 'undefined') {
	// getter
	return value;
	} else {
	// setter
	value = newValue;
	module.valueChanged();
	}
	};
	module.valueChanged = function() {
	// subscriberに通知
	module.subscriber(value);
	};
	return module;
	}

	// ViewModelとDOMをバインドする
	function bindViewModel(vm) {
	// vmのemailがpropertyNameとして受け取れる
	var propertyNames = Object.getOwnPropertyNames(vm);
	propertyNames.forEach(function(propertyName) {
	// viewというか観測対象のcomponentかな。。。
	var view = document.getElementById(propertyNames);
	var property = vm[propertyNames];
	// ViewModel -> View
	property.subscriber = function(newValue) {
	view.value = newValue;
	};
	// View -> ViewModel
	view.addEventListener('input', function(e) {
	property(e.target.value);
	});
	});
	}

	var vm = new ViewModel();
	bindViewModel(vm);
	vm.email('mitsuru.ogawa.jp@gmail.com');</script></body>
	</html>