Description

Allows facets to mutate in response to user actions or data transforms via data binding and easy JS-favor expressions.

You watching: Value amp






honeychrome.net-autofinish honeychrome.net-bind-macro honeychrome.net-bind-recaptcha honeychrome.net-bind honeychrome.net-date-picker honeychrome.net-geo honeychrome.net-iframework honeychrome.net-img honeychrome.net-lightbox honeychrome.net-list honeychrome.net-selector honeychrome.net for E-Commerce Getting Started Product Browse Page Product Page Client-side filtering Conditional State Copy Button Currency Conversion Dynamic Accordion Dynamic Content After User-Interactivity Linked Dropdowns Multi Page Flow Restrict Duplicate Selection Sjust how More Button Tic-Tac-Toe Tic Tac Toe Image Galleries with honeychrome.net-carousel Animated Snackbar honeychrome.net-analytics Checkout Flow Hotel Shopping Cart Favorite Button Paged List SeatMap SeatMap Multiple Selection Subscription Settings

Usage

The honeychrome.net-bind component allows practice stateful interactivity on honeychrome.net peras.

For performance, and also to prevent the risk of unsupposed content jumping, honeychrome.net-bind does not evaluate expressions on web page pack. This indicates visual facets have to be offered a default state and also not count on honeychrome.net-bind for initial render.

Watch this video for an introduction to honeychrome.net-bind.

honeychrome.net-bind has three major concepts:

State: A document-scope, mutable JSON state. State variables upday in response to user actions. honeychrome.net-bind does not evaluate expressions on page pack. Visual facets need to have actually their default "state" defined and not rely honeychrome.net-bind for initial render. Expressions: JavaScript-choose expressions that have the right to referral the state. Bindings: Special characteristics that attach an element"s building to a state through an expression. A building is bound by wrapping it inside brackets, in the create of .

Exhoneychrome.netle without asserted state


Hello World

Say "Hello Interactivity"
< p = "'Hello ' + foo" > Hello World < switch on = "tap:honeychrome.net.setState()" > Say "Hello Interactivity"
Open this snippet in playground

In the exhoneychrome.netle above:

The state begins as empty. It has actually a solitary binding to , the message content of a node, on the

facet. The worth contains the expression, "Hello " + foo. This expression concatenates the string "Hello " and also the value of the state variable foo.

When the user taps/clicks the button:

It triggers the tap event. The tap occasion invokes the honeychrome.net.setState() strategy. The honeychrome.net.setState() approaches sets the foo state variable to the value of Interactivity. The state is no longer empty, so the page updates the bound home to its state.


Calling honeychrome.net.setState() in some exhoneychrome.netles might set or change claims of other exhoneychrome.netles on page. Refresh this page to see exhoneychrome.netles prior to honeychrome.net.setState().

Exhoneychrome.netle through claimed state


< head > < style honeychrome.net-tradition > . greenBorder . redBorder < body > < honeychrome.net-state id = "theFood" > < manuscript kind = "application/json" > , "sushi" : } < div class = "greenBorder" = "theFood.style" > < p > Each food has a various border color. < p = "'I desire to eat ' + currentMeal + '.'" > I desire to eat cupcakes. < honeychrome.net-img width = "300" height = "200" src = "https://honeychrome.net/static/shoneychrome.netles/img/image2.jpg" = "theFood.imageUrl" > < switch on = "tap:honeychrome.net.setState()" > Set to sushi < switch on = "tap:honeychrome.net.setState()" > Set to cupcakes
Open this snippet in playground

In the exhoneychrome.netle above:

The component declares state utilizing JSON. The aspect has actually an id of theFood to enable us to reference the characterized information. But because does not evaluate on web page pack, the state is empty. The web page tons with visual defaults. The
aspect has actually class="greenBorder" defined. The second

aspect has actually "I desire cupcakes." defined within the tags. The src points to a url. Changeable aspects have bindings that point to expressions. The attribute on the

is bound to the theFood.style expression. The attribute on the second

is bound to the "I want to eat " + currentMeal + "." expression. The attribute is bound to the theFood.imageUrl expression.

If a user clicks the "Set to sushi" button:

The tap occasion create the honeychrome.net.setState action. The setState activity turns currentMeal into a state and also sets it to sushi. honeychrome.net evaluates bindings via expressions that contain the state currentMeal. ="theFood.style" updays class to redBorder. =""I desire to eat " + currentMeal + "."" updays the inner text of the second

facet to "I want to eat sushi". ="theFood.imageUrl updates the src of to https://honeychrome.net/static/shoneychrome.netles/img/image3.jpg

Using ="theFood.style" as an exhoneychrome.netle of expression syntaxes evaluation:

is the property to upday. theFood is the id of the component. currentMeal is the state name. In the instance of theFood it will certainly be cupcakes or sushi. style is the state variable. It coincides to the matching JSON key, and sets the bound home to that key"s worth.

specification

An honeychrome.net-state aspect may contain either a son