Estamos trabajando en algo propio llamado KODOTI. Click para unirte
Se viene KODOTI. Únete

Ejemplo de RiotJS con PHP y Bootstrap 3

He creado un ejemplo usando el modal de Boostrap 3 para crear un componente reutilizable con Riot Js.

Rodríguez Patiño, Eduardo
6,323 lecturas
Rodríguez Patiño, Eduardo
Hemos migrado hace poco nuestras publicaciones del blog antiguo. Si crees que esta se encuentra incompleta o sin coherencia deja un comentario para restaurarla manualmente.

¿Qué es Riot JS?

Es una microlibrería para trabajar las interfaces de nuestros proyectos web con las bondades que ofrece React de Facebook pero haciendo que el código sea más amigable y entendible.

Esta te permite crear tags personalizados similar a polymer y manipular el DOM al estilo que lo hace React.

En pocas palabras esta librería nos permite crear componentes que podemos reutilizar en toda la web usando solo javascript obteniendo un mejor performance. Esto demuestra que Javascript SI o SI es algo que debemos conocer ya que seguirán saliendo más librerías en el mercado y como dije alguna vez el backend terminará comiendose al frontend.

Creando nuestro componente

La finalidad de este ejemplo es crear un componente reutilizable usando Riot JS en nuestro proyecto actual el cual será un widget que muestre en un modal de Bootstrap 3 la información del usuario. Este componente podremos reuitilizarlo en cualquier parte de nuestra web.

<user-modal>

    <div id="user-modal-tag" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div if={ready} class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">{model.Apellido}, {model.Nombre}</h4>
          </div>
          <div class="modal-body">
              <div if={!ready} class="text-center">
                  Cargando, espere un momento por favor ...
              </div>
            <div if={ready} class="media">
              <div class="media-left">
                <img class="media-object user-modal-pic" src="uploads/{model.Foto}">
              </div>
              <div class="media-body">
                <dl>
                  <dt>Nombre</dt>
                  <dd>{model.Apellido} {model.Nombre}</dd>
                  <dt>Correo</dt>
                  <dd>{model.Correo}</dd>
                  <dt>Fecha nacimiento</dt>
                  <dd>{model.FechaNacimiento}</dd>
                  <dt>Sexo</dt>
                  <dd>{model.Sexo}</dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <style>
        .user-modal-pic{width:220px;}
    </style>

  <script>
      var self = this;
      self.ready = false;      

      getDataFromServer();

      function getDataFromServer(){
          $.post('?c=Alumno&a=Obtener&id=' + opts.id, function(r){
              self.model = r;
              self.model.Sexo = r.Sexo == 1 ? 'Hombre' : 'Mujer';
              self.ready = true;

              self.update();
          }, 'json')
      }

      this.on('mount', function(){
        $("#user-modal-tag").modal();          
      })
  </script>

</user-modal>

¿Cómo lo invocamos?

En primer lugar hay que declarar las etiquetas desde el lugar que lo queramos invocar y luego llamarlo mediante javascript.

<user-modal></user-modal>

riot.mount('user-modal', {
    id: 1
});

En este caso estaría cargando la información del usuario que contenga el id "1".

Recomiendo altamente que vean el video para que puedan entender y adjunto la descarga del proyecto.

¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín