En estos días he estado dedicado en mejorar mas mis conocimientos de javascript, he decidido por apostar en emberjs porque es bastante simple de usar y me resulta interesante aprenderla a usar.

He decidido explicar lo poco que aprendí entre lineas.
codigo completo en github https://github.com/danywalls/ember

 

var guardo = 0;

window.ClienteApp = Ember.Application.create();
var Cliente = Ember.Object.extend({
get_cliente: function(){
return "Hola " + this.get("nombre") + " " + this.get("apellido") + " tu clave es " + window.btoa(this.get("clave"))
}, updateMessage: Ember.observer(function(){

console.log("se actualizo" + this.get("nombre"));
if( guardo > 0)
{
$("#resultados").empty();
$("#resultados").append(cliente.get_cliente());
}
},"nombre")
});

var cliente = Cliente.create({});
cliente.addObserver("apellido",function(){
console.log("apellido cambio");
});
$(document).ready(function()
{
$("#nombre").focusout(function(){
cliente.set("nombre",$("#nombre").val());
})
$("#apellido").focusout(function(){
cliente.set("apellido",$("#apellido").val());
})
$("#guardar").click(function (){
guardo = 1;
cliente.setProperties({nombre:$("#nombre").val(), apellido:$("#apellido").val(), clave:$("#clave").val()});
$("#resultados").append(cliente.get_cliente());
});
//alert("hehehe");
});
Recordar importar las librerias :

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script src=”http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js”></script>
<script src=”http://builds.emberjs.com.s3.amazonaws.com/tags/v1.0.0/ember.js”></script>

y el form :

<form id=”form_id” action=”index.html” method=”post”>
<label for=”nombre”>Nombre</label>
<input type=”text” id=”nombre” value=””>
<label for=”apellido”>Apellido</label>
<input type=”text” id=”apellido” value=””>
<label for=”clave”>Clave</label>
<input type=”text” id=”clave” value=””>
<a href=”#” id=”guardar”>guardar</a>
<div id=”resultados”>
</div>
</form>