Data binding for element attributes?

[hr.stoyanov]

Ho can one bind into the data attributes of an element? Here is a real life example from Stripe.Com API.

<script
   src="https://checkout.stripe.com/checkout.js"

   class="stripe-button"
   data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
   data-amount="999"
   data-name="Stripe.com"
   data-description="Widget"
   data-image="/img/documentation/checkout/marketplace.png"
   data-locale="auto">
  </script>

How can Errai automatically bind a Model object into all these data-*  attributes? For now I bind set the values manually ...

And btw, do we have SCRIPT element in Errai 4 already?

[mbarkley]

Hi Hristo,

We have an example of that you can look at in Errai Tutorial. Here is a JS interop wrapper for an anchor element that supports data-binding to its href property.

Key things to note:

• The @Element("a") makes this injectable (satisfied by an anchor tag).
• It implements a special HasValue interface for native JS types.
• Any @Bound @JsType implementing this HasValue interface will use the HasValue methods for data-binding operations.
• This example uses @JsOverlay methods because the JavaScript HTMLAnchorElement doesn't actually have getValue and setValue methods but you could also:
  • Not use overlay methods for JavaScript objects that have "getValue" and "setValue" methods.
  • Not implement the HasValue methods and use @JsProperty so that calls to getValue and setValue are compiled to property accesses and assignments.

Cheers.

[hr.stoyanov]

Thanks Max,

Why does the class need to be abstract?

[mbarkley]

It doesn't have to be abstract. However, since it is an HTML element you can't create instances via the constructor (calling the constructor in GWT code compiles to "new HTMLAnchorElement()" in JavaScript which causes an error since elements can only be created by the document). So making it abstract is just a way of enforcing proper usage (i.e. only getting instances via injection).