leomicheloni/rivetsjs.sample.html

## rivetsjs.sample.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/vendor/rivets/dist/rivets.js"></script>
<script type="text/javascript">
	$(function(){
		//definimos un modelo simple, con algunas propiedades
		model = {
			name: "Ariel",
			lastname: "Ortega",
			age: 40,
			show: false,
			gritar: function(){
				console.log("goollll");
			},
			fullName: function(){
				return this.name + " " + this.lastname;
			},
			clubes:[{nombre: "River Plate", goles: 80},
				{nombre: "Valencia Club", goles: 9},
				{nombre: "UC Sampdoria", goles: 8},
				{nombre: "Parma FC", goles:3},
				{nombre: "Fenerbahçe SK", goles: 5},
				{nombre: "Newell's Old Boys", goles: 11},
				{nombre: "Independiente Rivadavia", goles: 4},
				{nombre: "All Boys", goles: 0},
				{nombre: "Defensores de Belgrano", goles: 5}
			]
		};

		//agregamos el formatter como un nuevo método a los que ya tiene
		rivets.formatters.clubformatter = function(club){
			return club.nombre + ": " + club.goles;
		};
		//indicamos el elemento DOM donde rivets debe bindear el modelo
		rivets.bind($("#view"), model);
	});
</script>
</head>
<body>
<div id="view" >
	<!--los atributos rv-* indican una relación directa entre el modelo y el elemento HTML -->
	<div rv-text="name" ></div>
	<!-- rv-text indica que la propiedad que rivets debe setear es text -->
	<div rv-text="lastname" ></div>
	<!-- en este caso rivets colocará el valor de la propiedad age del model en el vlaue de este elemento-->
	<input type="text" rv-value="age" />
	<!-- el nombre completo está asociado a una función -->
	<!-- el símbolo < indica dependencia --->
	<div rv-text="fullName < name fullName"></div>
	<!-- asocia el evento click al botón al método dle model -->
	<input type="button" rv-on-click="gritar" value="probar" />
	<div rv-if="show">La propiedad show es true</div>
	<div>Clubes y goles:</div>
	<ul >
		<!-- esta es la sintaxis alternativa de iteración, rv-each-* se puede colocar en el elemento padre o no -->
		<li rv-each-club="clubes"><span rv-text="club | clubformatter param1, param2"></span></li>
	</ul>
</div>
</body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	<script type="text/javascript" src="js/vendor/rivets/dist/rivets.js"></script>
	<script type="text/javascript">
	$(function(){
	//definimos un modelo simple, con algunas propiedades
	model = {
	name: "Ariel",
	lastname: "Ortega",
	age: 40,
	show: false,
	gritar: function(){
	console.log("goollll");
	},
	fullName: function(){
	return this.name + " " + this.lastname;
	},
	clubes:[{nombre: "River Plate", goles: 80},
	{nombre: "Valencia Club", goles: 9},
	{nombre: "UC Sampdoria", goles: 8},
	{nombre: "Parma FC", goles:3},
	{nombre: "Fenerbahçe SK", goles: 5},
	{nombre: "Newell's Old Boys", goles: 11},
	{nombre: "Independiente Rivadavia", goles: 4},
	{nombre: "All Boys", goles: 0},
	{nombre: "Defensores de Belgrano", goles: 5}
	]
	};

	//agregamos el formatter como un nuevo método a los que ya tiene
	rivets.formatters.clubformatter = function(club){
	return club.nombre + ": " + club.goles;
	};
	//indicamos el elemento DOM donde rivets debe bindear el modelo
	rivets.bind($("#view"), model);
	});
	</script>
	</head>
	<body>
	<div id="view" >
	<!--los atributos rv-* indican una relación directa entre el modelo y el elemento HTML -->
	<div rv-text="name" ></div>
	<!-- rv-text indica que la propiedad que rivets debe setear es text -->
	<div rv-text="lastname" ></div>
	<!-- en este caso rivets colocará el valor de la propiedad age del model en el vlaue de este elemento-->
	<input type="text" rv-value="age" />
	<!-- el nombre completo está asociado a una función -->
	<!-- el símbolo < indica dependencia --->
	<div rv-text="fullName < name fullName"></div>
	<!-- asocia el evento click al botón al método dle model -->
	<input type="button" rv-on-click="gritar" value="probar" />
	<div rv-if="show">La propiedad show es true</div>
	<div>Clubes y goles:</div>
	<ul >
	<!-- esta es la sintaxis alternativa de iteración, rv-each-* se puede colocar en el elemento padre o no -->
	<li rv-each-club="clubes"><span rv-text="club \| clubformatter param1, param2"></span></li>
	</ul>
	</div>
	</body>
	</html>