Aurelia bindable and jQuery plugins

0

I'm having a problem with bindable variables and jQuery plugins that manipulate the input value. I tested the following code and found that Aurelia does not listen for changes in values made by $.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);
  }
}

Do you have any way to solve this problem?

    
asked by anonymous 03.11.2017 / 14:46

1 answer

1

First, the ideal:

  • This will cause the change to not be traced and consequently the aforementioned desynchronization will occur.

    Solution:

    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);
    }
    

    Now the workaround :

    If the situation is actually more complex and you actually have to force the refresh of the binding manually, you must flag this action .

    For this:

    1) In your View , add the binding behavior of type signal to the desired binding (s):

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

    2) In your ViewModel , flag change by notifying all subscribed bindings to upgrade:

    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);
      }
    }
    
        
  • 03.01.2018 / 19:55