These are chat archives for canjs/canjs

23rd
Mar 2017
Szabolcs Schmidt
@sszabolcs
Mar 23 2017 09:26

Hello!

We use Zebra Datepicker for picking dates. If you select a date from the graphical interface Zebra sets that specific date with the jquery val() method on the input field.
With CanJS 2.x we could then trigger a 'change' event on the element to notify CanJS about the change and so the binded map could update its corresponding attribute value.
In CanJS 3.x triggering the 'change' event does nothing on CanJS side, so the map attribute binded to the input field does not get updated.
Is there a way I can notify CanJS 3.x about this external change?

Jeroen Cornelissen
@jeroencornelissen
Mar 23 2017 09:29
@sszabolcs try something like this : <input ($change)=“functionInsideViewModel(%element)” />
Szabolcs Schmidt
@sszabolcs
Mar 23 2017 09:33
@jeroencornelissen Thank you! I'll give it a try!
Szabolcs Schmidt
@sszabolcs
Mar 23 2017 10:44
@jeroencornelissen F.Y.I
I've found out how things work and upon what depends whether the triggered 'change' updates the map or not. I've created a JSBin. Within onSelect() - this is called when Zebra sets the date on the input with val() - I trigger a 'change' event. In JSBin everything works fine, no need to manually update the testDate field within onChangeHandler(). In order for this to work, you have to include 'can-jquery'! can.all.js contains this library, but in my project there were no can-jquery loaded, so triggering 'change' had no effect on the map and its attribute!
So the key here is in including can-jquery which assures the interoperability within CanJS events and JQuery events.
Jeroen Cornelissen
@jeroencornelissen
Mar 23 2017 10:48
:+1: makes sense
Since you binded testDate to the value attribute of your input {($value)}=“testDate”, you could also check the set function of testDate
Jeroen Cornelissen
@jeroencornelissen
Mar 23 2017 10:54
testDate: {
    type :'string',
    value: '',
    set : function(newValue) {
       console.log('testDate SET ', newValue);
      return newValue;
    }
  },
Szabolcs Schmidt
@sszabolcs
Mar 23 2017 10:56
:thumbsup: you're right! thx!
Nico R.
@nriesco
Mar 23 2017 14:04
Any recommendation on a date picker and money formatting to use with can 2.x (within a donejs project )
Morgan Heimbeck
@Xitstrategies
Mar 23 2017 15:12
I started with using this as a template https://github.com/icanjs/semantic-ui-daterangepicker-canjs
and money formatting, you might want to look at numeraljs, I used it with stache helpers and in my defines for getters and setters.
Nico R.
@nriesco
Mar 23 2017 16:46
@Xitstrategies thanks I’ll look at it..