naoto-ogawa/jquerymy_two_way_binding_sample.html

## jquerymy_two_way_binding_sample.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <script src="http://cdn.cloudwall.me/1.2/minimal.js"></script>
<body
    <form id="myform">
        name<input type="text" id="name">
        age<input type="text" id="age">
        <input type="button" id="btn" value="log">
    </form>
    <hr>
    name <input type="text" id="inname">
    <br>
    age <input type="text" id="inage">
</body>
<script>
var person = {
    name : "ogawa",
    age  : 13     ,
};
var manifest = {
    "ui":{
        "#name": { bind: "name" },
        "#age" : { bind: "age" }
    }
};
$("#myform").my(manifest, person);

$("#btn").on('click', function(){console.log(person)});
$("#inname").on('keyup', function(){
    person.name = $("#inname").val();
    $("#myform").my("redraw");
});
$("#inage").on('keyup', function(){
    person.age = $("#inage").val();
    $("#myform").my("redraw");
});

</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<script src="http://cdn.cloudwall.me/1.2/minimal.js"></script>
	<body
	<form id="myform">
	name<input type="text" id="name">
	age<input type="text" id="age">
	<input type="button" id="btn" value="log">
	</form>
	<hr>
	name <input type="text" id="inname">
	<br>
	age <input type="text" id="inage">
	</body>
	<script>
	var person = {
	name : "ogawa",
	age : 13 ,
	};
	var manifest = {
	"ui":{
	"#name": { bind: "name" },
	"#age" : { bind: "age" }
	}
	};
	$("#myform").my(manifest, person);

	$("#btn").on('click', function(){console.log(person)});
	$("#inname").on('keyup', function(){
	person.name = $("#inname").val();
	$("#myform").my("redraw");
	});
	$("#inage").on('keyup', function(){
	person.age = $("#inage").val();
	$("#myform").my("redraw");
	});

	</script>
	</html>