Having object reactively update when nested fields are updated

[abdelba]

Hi, why does an object with nested fields is not updated when nested fields are changed ?

Consider the following schema:

var schema = {
  size: {
    type: Object
  },
  'size.value': {
    type: Number
  },
  'size.unit': {
    type: String,
    allowedValues: ['cm', 'in']
  }
};

and the following template:

<template name="sizeInput">
    <p>
        value is {{reactiveValue.value}}
        unit is {{reactiveValue.unit}}
    <p>

    {{> UI.contentBlock}}
</template>

and I use it like so:

{{#sizeInput field="size"}}
    {{>input field="size.value"}}
    {{>select field="size.unit"}}
{{/sizeInput}}

The sizeInput element is registered without validationEvent. When I update the input and select value, the reactiveValue doesn't change.

Am I missing something ?

[jonjamz]

Can you show me how you registered the elements with the package?

[abdelba]

Yes, here is the code:

ReactiveForms.createElement({
  template: 'sizeInput'
});

ReactiveForms.createElement({
  template: 'input',
  validationEvent: 'keyup'
});

ReactiveForms.createElement({
  template: 'select',
  validationEvent: 'change'
});

[abdelba]

Not even a hunch ?

[jonjamz]

Hunch-wise, I believe that the surrounding element needs to use the same field as the internal elements in the current version. But there are a few different options you can use such as passThroughData which change the way nesting works.

On Oct 21, 2015, at 3:37 AM, Abdelhamid [email protected] wrote:

Not even a hunch ?

— Reply to this email directly or view it on GitHub.

[abdelba]

Do you mean having something like:

{{#wrapper field="myField"}}
    {{>input field="myField"}}
{{/wrapper}}

Ok, but it doesn't make sense in my example with two nested fields. And how should I use passThroughData ? I tried that and it gave nothing:

ReactiveForms.createElement({
  template: 'sizeInput',
  passThroughData: true
});

It's the same whether I add a reactive-element on the markup or not.

Thank you for your help anyway.

[jonjamz]

Ok sorry passThroughData is actually irrelevant for your use case. I'm flying across the country today so when I get home I'll try to build out an element like yours and see what is required. It's been a little while since I've gone that deeply into the package and I may need to adjust something to make this use case work.

[jonjamz]

The issue here is that I believe the form data is currently stored in a single-level object, so "size.value" is a top-level key, rather than a nested key inside "size". In the next update I will try to change the way this works to support your use case.