Archivo de septiembre de 2019

Bind en las clases de ES6 de JavaScript

Publicado por Iván Gajate el 21 de septiembre de 2019 en Desarrollo Web, Eventos, JavaScript | No hay comentarios »

Respuesta corta:

// Utilizo bind para vincular la función con el scope this
this.onClick = this.onClick.bind(this);

Respuesta larga:

Al pasar el manejador del evento como un callback, se pierde el ámbito, de tal manera que la función se ejecuta correctamente, pero dentro de ella se cree que this es el propio botón (la etiqueta html <button>). Cuando realmente nosotros esperamos que this sea la propia clase.

Para solucionarlo basta con reasignar en el propio constructor el scope que debe tener esa función.

this.onClick = this.onClick.bind(this);

y nuestra clase funcionará como esperamos:

class Foo{
 
  constructor(){
    this.onClick = this.onClick.bind(this);
    // Listener del boton
    document.getElementById('button').addEventListener('click', this.onClick);
  }
 
  onClick(){
    console.log(this); // Foo {...}
    // Ahora puedo remover el listener sin problema
    document.getElementById('button').removeEventListener('click', this.onClick);
  }
 
}
 
var foo = new Foo();

Una muy buena referencia y explicado con más detalle: https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/

Usar npm sin sudo

Publicado por Iván Gajate el 8 de septiembre de 2019 en Desarrollo Web, JavaScript | No hay comentarios »

A menudo cuando vamos a escribir, por ejemplo

npm install vue

seguramente nos de un error de permisos, y tengamos que utilizar sudo para que se pueda instalar, insertando la contraseña de administrador.

Tras mucho buscar he encontrado esta forma de solucionarlo, bastante fácil de aplicar.

Consiste en usar nvm (Node Version Manager) para instalar Node desde el terminal en lugar del instalador ejecutable.

Instalamos nvm con Brew

brew install nvm

Luego podemos ver las versiones actuales de Node

nvm ls-remote

e instalamos la última, en mi caso la 10.16.3

nvm install v10.16.3

Visto en https://www.competa.com/blog/use-nvm-for-fun-and-profit-and-to-run-npm-without-sudo/