0

Estou com um problema com as variáveis bindable e plugins jQuery que manipulam o valor de inputs. Testei o seguinte código e constatei que o Aurelia não escuta as alterações de valores feita por $.fn.val:

<template>
  <input id="my-input" value.bind="inputvalue" type="text">
</template>

class MyClass {
  @bindable inputvalue;

  constructor() {
    this.inputvalue = 'First value'
  }

  bind() {
    setTimeout(() => {
      $('#my-input').val('Some value').change();
      // No input o valor é 'Some value',
      // mas na variável bindable this.inputvalue o valor ainda é 'First value'
    }, 4000);
  }
}

Tem alguma maneira de resolver esse problema?

1 Resposta 1

1

Primeiro, o ideal:

Como o binding está conectando objetos do Aurelia (ou seja, View e ViewModel), o ideal seria você não usar um agente externo (jQuery, neste caso) para atualizar sua View diretamente. Isso fará com que a alteração não seja rastreada e, consequentemente, ocorra a dessincronização mencionada.

Solução:

bind() {
  setTimeout(() => {
    // setar o valor diretamente em sua VM, que então atualizará a View, 
    // considerando que o bind padrão para inputs é de duas vias (two-way)
    this.inputvalue = 'Some value';     
  }, 4000);
}

Agora, o workaround:

Se a situação na realidade é mais complexa e realmente tiver que forçar o refresh do binding manualmente, é necessário sinalizar esta ação.

Para isso:

1) Em sua View, adicionar o binding behavior do tipo signal ao(s) binding(s) desejado(s):

<template>
  <input id="my-input" value.bind="inputvalue & signal:'forcar-refresh'" type="text">
</template>

2) Em sua ViewModel, sinalizar a mudança notificando todos os bindings inscritos a se atualizarem:

import {BindingSignaler} from 'aurelia-templating-resources';

@inject(BindingSignaler)
class MyClass {
  @bindable inputvalue;
  signaler;

  constructor(signaler) {
    this.inputvalue = 'First value';
    this.signaler = signaler;
  }

  bind() {
    setTimeout(() => {
      $('#my-input').val('Some value').change();
      this.signaler.signal('forcar-refresh'); // <--- Aqui
    }, 4000);
  }
}
3
  • Eu consegui resolver o problema, acho que usando o value.two-way se não me engano. Essa resposta no SOen me ajudou. Mas quando tiver um tempinho vou testar a tua resposta.
    – KaduAmaral
    Commented 3/01/2018 às 20:46
  • Legal @KaduAmaral. Se você conseguir recuperar tua solução e verificar que ela é mais fácil de implementar, creio que valeria postar ela aqui e marcar como a resposta. Commented 4/01/2018 às 10:46
  • Sim vou fazer isso quando tiver um tempinho... Valeu pela resposta. :)
    – KaduAmaral
    Commented 4/01/2018 às 12:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .