Skip to content

Basic Idea

Jump to bottom
Ralf Bitter edited this page Aug 2, 2025 · 14 revisions

The whole interaction of ASYNergy and revIgniter is based on ASYNergy element attributes/name-value pairs called directives. All directives have an asyn: prefix. The common format for all of them is:
asyn:[dispatched browser event]="[handler to call]"

In its simplest form, there is at least one element defined as "mutable" by an asyn:mutable attribute and an element defined as "model" by an asyn:model attribute that acts as a trigger for AJAX requests. "model" elements and "mutable" elements are related if their ASYNergy attribute values are equal. Such a value serves as the name of the revIgniter controller handler that will be called on request. The innerText, innerHtml, value, etc., of the "model" element is added to the payload of the request sent to the server.

The "mutable" element can be any HTML element like a span element, a paragraph, a div, section, article element, or any other element. All HTML enclosed by the "mutable" element's tags is replaced when an interaction occures and the server responds with the new HTML generated by revIgniter.

asyn:model attributes can be added to any element that dispatches an input event.

There are other directives that can trigger an AJAX request like asyn:click, asyn:keydown, and asyn:submit. Please see chapter Actions for more information.

Example

So far, the idea. Following a very simple example of the concept outlined above. The generated web page includes an input field and a paragraph that reflects the interaction with the input field.

The View
Let's have a look at the relevant HTML elements of the revIgniter view file, which we call "asynTestView".

<input type="text">
<p>Hello <span></span></p>

Now let's add the directives:

<input asyn:model="name" type="text">
<p>Hello <span asyn:mutable="name"></span></p>

The ASYNergy attributes of these elements, asyn:model and asyn:mutable, have equal values, in this case, "name". This means that whenever the text of the "model" element is changed, there is a request calling a revIgniter controller handler "name" and the content enclosed by the tags of the "mutable" element is updated.

Of course, we still need to include the ASYNergy script. We add the following line just before the closing body tag:

[[gData["asynergyScript"] ]]

The entire HTML markup should look like this:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
      <input asyn:model="name" type="text">
      <p>Hello <span asyn:mutable="name"></span></p>
    [[gData["asynergyScript"] ]]
  </body>
</html>

The Controller
The controller needs a handler called "name" (the value of the ASYNergy attributes):

command name
  rigAsynRespond "{{name}}"
end name

This code sends the response to the client. The data to be sent is in the first parameter of the handler rigAsynRespond. In this case, the parameter value "name", the value of the "model" element's ASYNergy attribute, is enclosed in double curly braces. This means: The value/text of the "model" element, the input field, is used unchanged as response data.

We need to load the ASYNergy library:
rigLoaderLoadLibrary "ASYNergy"
Of course, we don't forget to add the name of the handler above to the list of handlers in the gControllerHandlers variable, so that the controller should now look like this:

<?lc

put "asynTest,index,name" into gControllerHandlers


command asynTest
  rigLoaderLoadLibrary "ASYNergy"
end asynTest


command index
	get rigLoadView("asynTestView")
end index


command name
  rigAsynRespond "{{name}}"
end name

That's it, it's that simple to demonstrate the interaction between revIgniter and ASYNergy.

ASYNergy USER GUIDE

Clone this wiki locally