kamikaze-lab/app.js

## readme.md

      
    Raw
  

              readme.md
            
          
    Data binding con javascript nativo

Mostrar lo simple que puede ser hacer un data-binding utilizando solo javascript.


Objetivo y descripción
Dependencias
Puesta en marcha
Referencias
Créditos y autor

Objetivo y descripción

El data-binding es una técnica que ayuda a simplificar el mostrar datos en las vistas, su funcionamiento radica en asociar las variables de javascript a un elemento del DOM y cada que esta cambia también lo hará el elemento.
Dependencias


JavaScript - JavaScript is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user.
JQuery for Demoe - jQuery is a fast, small, and feature-rich JavaScript library.

Puesta en marcha

Paso 1: Crear un observador.
Se pueden crear dos tipos de observadores, uno que esté atento a los cambios en las variables del programa de javascript y el otro que esté atendiendo los cambios en los elementos del DOM. En nuestro caso escucharemos las variables del programa javascript como se muestra a continuación:
var data = {};
Object.observe(data, function(changes){
    changes.forEach(function(change) {
		// actions ...
    });
});
Paso 2: Definir las acciones de los cambios.
Dentro del iterador de cambios en el observador se deben colocar las acciones que necesitamos cuando exista un cambio de variables.
var data = {};
Object.observe(data, function(changes){
    changes.forEach(function(change) {
	   var name = (data.name || "");
        div.text(name);
    });
});
Paso 3: Disparar los cambios de variables.
Esto nos ayudará a disparar los cambios en el DOM cuando se haga un cambio en las variables.
var data = {};
Object.observe(data, function(changes){
    changes.forEach(function(change) {
	   var name = (data.name || "");
        div.text(name);
    });
});
data.name = "Kamikazelab";
Referencias


Data-Binding revolutions with Object.observe() by Addy Osmani:

Data-Binding


Créditos y autor


Autor del snippet: Mario Andrade @TheVansters
Los snippets pertenecen a KamikazeLab


## app.js
jQuery(function ($) {

    'use strict';

    var app = {
        init: function() {
            this.user = {};
            this.cacheElements();
            this.bindEvents();
            this.initObserve();
        },
        cacheElements: function() {
            this.$inputField = $("#inputField");
        },
        bindEvents: function() {
            this.$inputField.on('keyup', this.changeData.bind(this));
        },
        initObserve: function() {
            Object.observe(this.user, function(changes){
                changes.forEach(function(change) {
                    $("#dataBindingRender").html( changes[0].object.name );
                });
            });
        },
        changeData: function(event) {
            this.user.name = $(event.target).val().trim();
        }
    };

    app.init();

});

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data Binding Nativo en javascript</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>

    <input type="text" id="inputField">

    <div id="dataBindingRender">Text</div>

    <script type="text/javascript" src="public/js/app.js"></script>
</body>
</html>
	jQuery(function ($) {

	'use strict';

	var app = {
	init: function() {
	this.user = {};
	this.cacheElements();
	this.bindEvents();
	this.initObserve();
	},
	cacheElements: function() {
	this.$inputField = $("#inputField");
	},
	bindEvents: function() {
	this.$inputField.on('keyup', this.changeData.bind(this));
	},
	initObserve: function() {
	Object.observe(this.user, function(changes){
	changes.forEach(function(change) {
	$("#dataBindingRender").html( changes[0].object.name );
	});
	});
	},
	changeData: function(event) {
	this.user.name = $(event.target).val().trim();
	}
	};

	app.init();

	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Data Binding Nativo en javascript</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	</head>
	<body>

	<input type="text" id="inputField">

	<div id="dataBindingRender">Text</div>

	<script type="text/javascript" src="public/js/app.js"></script>
	</body>
	</html>