Knockout JS Framework

Posted on 24 of julio, 2015 by admin in Knockout

A manera de introducción Knockout js es un framework javascript que nos ayuda a crear interfaces con mayor facilidad. Este nos ayuda en el proceso de mostrar información y manejar eventos en el lado del cliente.

TABLA DE CONTENIDO:
1. Implementación

1. Implementación

Primero descargamos las librerías que necesitaremos:
• Bootstrap: http://getbootstrap.com/getting-started/#download
• Knockout: http://knockoutjs.com/downloads/index.html
• Jquery: http://jquery.com/download/

Luego creamos una página HTML y le colocamos el nombre que le guste yo la nombre knockout.html podemos tomar el témplate de bootstrap de la página de ejemplo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Ahara incluimos la libreria de knockout:


<script src="Script/knockout-3.3.0.js"></script>
 

Luego crearemos una interface como la de la imagen siguiente:

ui

A continuación el código de esta ui:


<div class="col-sm-8 blog-main">
                <div class="row">
 
                   <form>
                        <div class="form-group">
                            <label for="txtNombre">Nombre:</label>
                            <input type="text" class="form-control" id="txtNombre" placeholder="Nombre" data-bind="value: nombre">
                        </div>
                        <div class="form-group">
                            <label for="txtEmail">Email:</label>
                            <input type="email" class="form-control" id="txtEmail" placeholder="Email" data-bind="value: email">
                        </div>
                        <div class="form-group">
                            <label for="txtWeb">Web:</label>
                            <input type="text" class="form-control" id="txtWeb" placeholder="Web" data-bind="value: web">
                        </div>
                        <div class="form-group">
                            <label for="txtComment">Comentario:</label>
                            <textarea id="txtComment" class="form-control" rows="5" data-bind="value: comments"></textarea>
                        </div>
                       <button type="button" class="btn btn-default btn-lg" data-bind="click: click_enviar">
                           <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Enviar
                       </button>
 
                        <button type="button" class="btn btn-default btn-lg" data-bind="click: click_eliminar">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Eliminar
                        </button>
                    </form>
                    <hr>
                </div>
 
                <div class="row">
                     <h3>Datos Enviados</h3>
                     <hr/>
                    <div class="form-group">
                        <label for="txtNombre">Nombre:</label> <label data-bind="text: nombre2"></label>                       
                    </div>
                    <div class="form-group">
                        <label for="txtEmail">Email:</label> <label data-bind="text: email2"></label>
                    </div>
                    <div class="form-group">
                        <label for="txtWeb">Web:</label>  <label data-bind="text: web2"></label>                     
                    </div>
                    <div class="form-group">
                        <label for="txtComment">Comentario:</label>  <label data-bind="text: comments2"></label>                       
                    </div>
                </div>
 
 
                </div>

Ahora crearemos la el objeto javascript que manejar la data de la vista le llamaremos myViewModel:

<script type="text/javascript">
 
    var myViewModel = {
        nombre: ko.observable(''),
        email: ko.observable(''),
        web: ko.observable(''),
        comments: ko.observable(''),
        nombre2: ko.observable(''),
        email2: ko.observable(''),
        web2: ko.observable(''),
        comments2: ko.observable(''),
        click_enviar: function () {
 
            var nom = this.nombre();
            var ema = this.email();
            var wb = this.web();
            var com = this.comments();
 
            this.nombre2(nom);             
            this.email2(ema);
            this.web2(wb);
            this.comments2(com);
         
            alert('datos enviados correctamente')
        },
        click_eliminar: function () {
            this.nombre('');
            this.email('');
            this.web('');
            this.comments('');
            this.nombre2('');
            this.email2('');
            this.web2('');
            this.comments2('');
        },
 
    };
 
    //
</script>

Ahora registramos nuestro objeto:


<script type="text/javascript" defer="defer">
    $(document).ready(function () {
        ko.applyBindings(myViewModel);
    });
 
</script>
 

Ahora validamos que todo funciona correctamente. Para finalizar estos nuevos framework nos ayudad a reducir el tiempo de desarrollo de nuestra aplicación y aumentamos la productividad ya que ellos se encargan de hacer el trabajo difícil.

Descargar ejemplo