Przekazywanie parametru, do interfejsu funkcji.

Question

Pytanie brzmi trochę dziwne, ale teraz wytłumaczę dlaczego:

   this.validator.getStore().login.addEventListener("keyup",
      (event) => this.bindMethod(event, (event) => this.isNickBusy(event)));

Co ten kod robi. Wywołuje magazyn, a ten zwraca obiekt DOM, na którym uruchamiam listener, a ten bindujeMetody oraz element targetingu. Wygląda cudacznie, ale za chwilę powiem dlaczego.

  bindMethod(element, func) {
    window.setTimeout(() => func(element), 100);
  }

Dlaczego tak ? próbowałem, przekazać argument do interfejsu funkcji.

Zrobiłem dokładnie coś takiego:

    this.validator.getStore().password.addEventListener('keyup',
      (event) => window.setTimeout(event => this.isNickBusy(event), 100);

Czyli obiekt Event przekazany do innego obiektu po przez funkcje. 

Czy się udało?

Niestety, zwrócił undefined. Dlatego wykorzystałem te powyższe rozwiązanie.

A chciałbym uzyskać taki efekt? 

   this.validator.getStore().login.addEventListener("keyup",
      (event) => this.bindMethod((event) => this.isNickBusy(event)));

czyli ma przyjąć argumencie funkcje z wcześniejszą wartością, niestety oczywiście tak się nie dzieje.

Wydaje mi się, że nie da się tego zrobić, aczkolwiek może jest jakiś trik na to.

Dla tych co chcą wiedzieć co się dzieje w głębiej:

  isNickBusy(validElement) {
    if (validElement.target.value.length > 3) {
      this.valid = false;
      let logNickRoute = `http://${location.hostname}:${this.config.port}`
        + "/api/" + `${this.config.log_route_nick}`
        + `${validElement.target.value}`;

      Axios.get(logNickRoute, AxiosConfig)
        .then(response => this.isErrorNick(response, validElement))
        .catch(() => this.validator.setException('errorApi', this.parent));
    }
  }

  isErrorNick(response, validElement) {
    this.valid = response.data.status;
    if (this.valid) {
      this.validator.setWarning("login", "nickIsBusy");
      this.errorSlot.nick = true;
    } else if (this.errorSlot.nick && !this.valid) {
      this.validator.cleanLog(validElement, "nickIsBusy");
      this.errorSlot.nick = false;
    }
  }

 

Comments

Nie jestem pewien czy dobrze rozumiem Twój problem, więc piszę w formie komentarza.

bindMethod(element, func) {

Metoda bindMethod przyjmuje dwa argumenty: element i func. Dlaczego więc jako pierwszy parametr przekazujesz tam funkcję, która przyjmuje event (a we wcześniejszym przypadku posyłasz tam event)?

this.validator.getStore().login.addEventListener("keyup",
   (event) => this.bindMethod((event) => this.isNickBusy(event)));

Chyba this będzie Twoim elementem, albo event.target.

Prędzej zapisałbym to w ten sposób (zakładając, że this się nie "zgubi"):

this.validator.getStore().login.addEventListener("keyup", (event) =>{
     this.bindMethod(event.target, this.isNickBusy); // this.isNickBusy to referencja do metody, którą z kolei metoda bindMethod wywołuje później przekazując parametr element
});

PS. Dedukuję, że w metodzie this.isNickBusy parametr validElement traktowany jest jako event, bo odwołujesz się w if do property target - jesli tak, to nie jest to element ale obiekt zdarzenia, czyli event. Zmień zatem nazwę tam i w metodach, które ją wywołują z tym parametrem żeby było wiadomo, że to nie element DOM tylko obiekt zdarzenia.

---

1. Inaczej elementu(eventu) nie widzi. Wiem, też mnie to zdziwiło.

---

Inaczej elementu(eventu) nie widzi

Nie rozumiem.

Próbowałeś sposobu, który zaproponowałem?

---

Odpisałem dlaczego tak zrobiłem xd. Jutro przetestuje

---

Element DOM a obiekt zdarzenia to dwa różne obiekty. Choć element DOM może się w zdarzeniu zawierać.

Pokaż wersję kodu, gdzie funkcja nie widzi tego co powinna. Może this się "gubi"?

---

Po drobnym fixie (tak jak przewidziałeś miał problemy z this). Twoje rozwiązanie działa trzeba drobną poprawkę zrobić.

    this.validator.getStore().login.addEventListener('keyup',
      (event) => {
        this.bindMethod(event, this.isNickBusy.bind(this));
        this.clearError('login', 'emptyLogin');
      }

  bindMethod(event, func) {
    window.setTimeout(() => func(event), 100);
  }

 

---

Jeśli teraz działa, to możesz zamknąć temat. :)

Answer 1

Um, nie do końca rozumiem problem.

this.validator.getStore().password.addEventListener('keyup',
  (event) => window.setTimeout(event => this.isNickBusy(event), 100);

setTimeout wywołuje funkcję bez parametru `event` - nie ma więc sensu brać go jako parametr.

Coś takiego nie działa?

this.validator.getStore().password.addEventListener('keyup',
  (event) => window.setTimeout(() => this.isNickBusy(event), 100);

 

Comments

mi sie wydaje, że błąd tkwi gdzieś w założeniach koncepcyjnych do problemu... te rozwiazania  wszystkie sa wg mnie zbyt ciężkie do klarownego otestowania, a z doswiadczenia wiem, że jeżeli coś jest ciezkie do unit testów to znaczy, że można to zrobić lepiej i prościej... wieczorem postaram sie tez pomyśleć jak znajde chwile

---

jutro spróbuje twojego sposobu ;). Ostatecznie będzie pozyskiwał z store, jakoś to już przeżyje.