amp-bind can't set state for variables inside amp-state

At the moment it’s only possible to set the values for global variables via AMP.setState but not for variables declared inside amp-state.

Example: AMP.setState(foo=123) -> is working

AMP.setState(myAmpState.foo=123) where

<amp-state id="myAmpState">
      <script type="application/json">
      {
          "foo": "234"
      }
.....

is not working. Current workaround is setting default variables.

@choumx @ericlindley-g

[dvoytenko]

myAmpState.foo sounds good. An alternative to AMP.setState() we could expand grammar with {} like this:

<button on="tap:{myAmpState.foo = bar}"

That way we could keep state and actions in separate grammars since functional calls normally not the same as state manipulation.

RE: grammar: by all means. The only question is the size. Last time I tried, I got 9K minified JavaScript and decided to go down the manual path. With amp-bind we have an alternative approach, though. We can queue up {} expressions in actions until amp-bind has been downloaded and installed and have amp-bind parse them. That could let us be expressive in grammar w/o blowing up core binary size.

[dreamofabear]

Hmm, I see. So in the case of resorting to the “default” size, selectedSize will have a value inconsistent with what’s displayed on the page.

Question: do you need selectedSize to always be consistent with the page’s display state? For this page, a form can submit using the amp-selector#size’s value instead of the selectedSize variable.

I can see how this would be useful though. One way would could support this is to support more powerful syntax in AMP.setState as Chiara suggests. Instead of having the logic for setting default size in amp-selector#size, move it into AMP.setState:

<amp-selector name="color" [selected]="selectedColor" 
on="select:AMP.setState(
    selectedColor=event.targetOption,
    selectedSize=(product[event.targetOption].sizes.includes(selectedSize)
        ? selectedSize 
        : product[event.targetOption].defaultSize)
")>

To support this, I like Dima’s suggestion to allow amp-bind to parse these expressions with a special syntax for AMP.setState. Perhaps:

on="tap:AMP.setState({
    selectedColor: event.targetOption,
    selectedSize: (product[event.targetOption].sizes.includes(selectedSize)
        ? selectedSize 
        : product[event.targetOption].defaultSize)
})"

This allows multiple variable assignment and makes it clear that the special syntax only works for the AMP.setState action.