Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment