One value, two fields

Edit either field and watch the other one update immediately. Both fields share a value in the local datastore.

Try both versions. Each result has its own datastore. Reload the page to reset.

Python

Built from Python

Python recipe

from gramlot.page import WebPage


class Page(WebPage):
    """Edit either field and watch the other one update immediately. Both fields share a value in the local datastore."""

    def main(self, root):
        pane = root.div(datapath="live_binding")
        pane.data('.text', 'Hello world')
        pane.textBox(value='^.text', lbl='First field', updateOn='input', lbl_position='TL', width='100%')
        pane.textBox(value='^.text', lbl='Second field', updateOn='input', lbl_position='TL', width='100%', margin_top='14px')
        pane.p('Both fields use the same relative value path.')

JavaScript

Built in the browser

JavaScript recipe

export function build(root) {
  const pane = root.div({datapath: "live_binding"});
  pane.data(".text", "Hello world");
  pane.textBox({"value": "^.text", "lbl": "First field", "updateOn": "input", "lbl_position": "TL", "width": "100%"});
  pane.textBox({"value": "^.text", "lbl": "Second field", "updateOn": "input", "lbl_position": "TL", "width": "100%", "margin_top": "14px"});
  pane.p("Both fields use the same relative value path.");
}

Python builds the recipe before publication. JavaScript builds it in the browser. The same Gramlot runtime renders both. These examples need no application server.