Aurelia bindable and jQuery plugins

Question

Aurelia bindable and jQuery plugins

Navigation

#1 by (1 votes)

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?

jquery

asked by anonymous 03.11.2017 / 14:46

1 answer

Music app does not run on Android Remove highlight image from post

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