Binding JSON number type converts to string upon edit

[brettveenstra]

While trying to implement an object comparison (using the areEqual function from the app-contacts project), discovered that once a number property is bound and edits applied (input type=text), it mutates to a string, breaking straight-forward comparison efforts.

The binding infrastructure seems to be the place to address this effect, maybe the ShadowDOM?

Here's some example code:

// Customer JSON
{
  customerName: 'Foo',
  customerNo: 12344045,
  customerId: 1,      // read-only
  balanceThreshold: 1000,
  status: 'Active'
};



// View Model
activate(params) {
    this.customerService.get(params.id).then((data) => {
      this.currentCustomer = data;
      this.originalCustomer = JSON.parse(JSON.stringify(data));
      this.isDirty = false;

      Object.keys(this.currentCustomer).forEach((key) => {
        this.bindingEngine.propertyObserver(this.currentCustomer, key).subscribe((newValue, oldValue) => {
          this.isDirty = !areEqual(this.originalCustomer, this.currentCustomer);
          if (this.isDirty)
          {
            // console.dir() against the original and current objects shows the effect
          }              
        });
      });
}

// utility function
export function areEqual(obj1, obj2) {
  return Object.keys(obj1).every((key) => obj2.hasOwnProperty(key) && (obj1[key] === obj2[key]));
}

So changes to balanceThreshold or customerNo trigger a the call back but the isDirty will always stay true.

[fopsdev]

yeah i also recognised that.
i've fixed it by using a valueconverter:

export class IntegerFromInputValueConverter {
  fromView(value) {
    return parseInt(value);
  }
}

would be cool if the binding system would automatically do that because if i bind an integer i also expect an integer back...

[EisenbergEffect]

We have some ideas about how this could be done in the future. The basic problem is that inputs of type text coerce the value to string, which is out of our control. But we have some ways we think we can help do it on the model side.

[fopsdev]

ok good to know
for now i will provide global valueconverters for all my input types.
why for all?
because i would like to set the viewModel to dirty if there is something coming back from the view (fromView)
But how can i access the viewModel from inside the valueconverter?

[jdanyow]

@fopsdev check out aurelia/templating-resources#160 (comment)

@brettveenstra we're tracking this one in aurelia/templating#96

[brettveenstra]

thanks for the reference @jdanyow