Two-way binding and jquery changes problem

CanJS
1

Hi,

Aftert setting up a two-way binding with a template element and a map, I tried to change the value with jquery but the binding doesn’t work.
Do I miss something?

Here is an example where I set the binding for a <input> and a <p> element. if I change the <input> value using jquery it will not change the <p>.

JSBIN EXAMPLE

Thank you.

2

Hi @fp_dev,

You’ll need to trigger a change event after using jQuery to change the value, like this:

$("#myIn").trigger("change");

Here’s a JSBin with that fix: http://jsbin.com/dohuwusomo/1/edit?html,js,output

Out of curiosity, is there a reason you’re using jQuery to change the value instead of updating the value on the can.Map?

Best,
Chasen

3

Thank you @chasen,

The reason is the following: in situations where I have to include third parties libraries that process data asyncronously and that are configured to call a global function (callback) when they end, I don’t find another way to bind a Map attribute or a Component viewModel to the result of the computation.

My approach is to bind a custom attribute to the element and change it programmatically using the callback to track the result event of the external conputation.

An example could be googlemaps API when using the async defered mode:

<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
 </script>

when the callback method is called when the API js is fully loaded.

In general, I use the scope writing a proper parent/child structure with the Components view (and viewModel) but in this case I cannot find other ways.

Are there other possible solutions?

Thank you!

4

Also creating a Map in the window object (globally) and updating it will work, even better: i can observe it from different components without using jQuery.
Thank you a lot @chasen for the suggestion: i don’t know why did not I think of that before.

1 Like