Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Ejemplo de RiotJS con PHP y Bootstrap 3
Actualizado el 13 Mayo, 2016 y leído 2,061 veces
Calificación: 10.00 / 10

Ejemplo de RiotJS con PHP y Bootstrap 3

Anexsoft

¿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 <user-modal></user-modal> 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.

¡Adquiera ya!

  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.