Strange behaviour Map define set()

CanJS
1

Hello I have a problem with simple code for input, because after specific steps it returns wrong data. It should return minLimt (1) value when user puts NaN e.g. string.
To reproduce:

  1. push + to increment initial value. After put any string and click outside input field. It’s ok in input is 1.
  2. Now put one more time string and click outside input field. The value in input equals last inserted string but not 1. Could someone explain me why?
<can-component tag="ss-spinner">
  <style type="less">
    display: block;
    
    p { font-weight: bold; }
  </style>
  <template>
    <button ($click)="decrement()">-</button>
    <input type='text' {($value)}="spinnerValue" >
    <button ($click)="increment()">+</button>
  </template>
  <script type="view-model">
    import Map from 'can/map/';
    import 'can/map/define/';

    export default Map.extend({
      define: {
        spinnerValue: {
          type: "number",
          value: 1,
          set: function(newVal) {            
           if(!isNaN(newVal)){            
              if(parseInt(newVal) < this.minLimit) {
                return this.minLimit;
              }              
              return newVal;
            } else {
              return this.minLimit;
           }  
          }
        },
        minLimit: {
          type: "number",
          value: 1
        }      
      },
      increment: function(){
        this.attr('spinnerValue', this.attr('spinnerValue') + 1);        
      },
      decrement: function(){
        this.attr('spinnerValue', this.attr('spinnerValue') - 1);        
      }
    });
  </script>
</can-component>
2

Thanks for reaching out. Generally speaking, these things are far easier to help with if you create a JSBin.

I created one for you: http://justinbmeyer.jsbin.com/sevaha/2/edit?html,js,output

This is because the value of spinnerValue isn’t changing. After step #1 The value of spinnerValue is 1. When someone types string and clicks away, the value of spinnerValue is still 1. The two-way bindings don’t update the input because the value of spinnerValue hasn’t changed.

3

@doktor_lubicz It’s not ideal but you can work around it for now:

4

Here’s a solution that keeps your ViewModel clean:

It uses a side inputValue. Essentially, I’m two-way binding that value, but using oninput. On a change event, I update spinnerValue and use use what that becomes to update inputValue.

This kicked off a big discussion internally at Bitovi. I’m going to create an issue. Thanks!

5

Thank you very much for help.

6

Related issue: https://github.com/canjs/can-stache-bindings/issues/122