-
Notifications
You must be signed in to change notification settings - Fork 0
Action Parameters
Calling the Controller Handler from Global JavaScript
This example shows how to pass parameters to an ASYNergy action and how to synchronize "model" elements with a "mutable" element.
The controller asynActions.lc loads the ASYNergy library and the asynActionsView.lc view. The name handler adds the value of an <input> field to the response. A click action is associated with the resetName handler.
<?lc
put "asynActions,index,name,resetName" into gControllerHandlers
command asynActions
rigLoaderLoadLibrary "ASYNergy"
end asynActions
command index
get rigLoadView("asynActionsView")
end index
command name
rigAsynRespond "{{name}}"
end name
command resetName
local tParamsA
# GET ACTION PARAMETERS AND SPECIFY TO WHICH MODEL PARAMETER(S)
# AN LC FUNCTION SHOULD BE APPLIED ACCORDING TO THE VALUE
# OF THE asyn:mutable ATTRIBUTE
put rigAsynParams(1) into tParamsA
if tParamsA[1] is empty then
put "Chico" into tParamsA[1]
end if
rigAsynRespond tParamsA[1], "name"
end resetName
If the click action doesn't pass parameters the resetName handler sends "Chico" to the client, otherwise it sends the first parameter of the click action. The second parameter of the "rigAsynRespond" handler defines the "model" to be synced with the "mutable" element, "name" is the value of the id attribute of the <input> field.
The view consists of an <input> field, a paragraph with an <span> element that has an asyn:mutable directive, and a button element with a asyn:click directive. Note the suffix of the asyn:mutable attribute value. This is the name of the LC function that will be applied to the value of the <input> field.
The gData variable [[gData["asynergyScript"] ]] is used to load the ASYNergy JavaScript framework.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="float: left;margin-right: 20px;">
<input asyn:model="name" type="text" id="name">
</div>
<div>
<p>Hello <span asyn:mutable="name.toUpper"></span></p>
<button asyn:click="resetName">Reset Name</button>
</div>
[[gData["asynergyScript"] ]]
</body>
</html>As the user clicks on the button a request is sent to the server calling the resetName handler. Since the asyn:click directive of the button has no parameters, the handler returns "Chico".
Let's add a parameter to the asyn:click directive. We replace
<button asyn:click="resetName">Reset Name</button>with
<button asyn:click="resetName('Bingo')">Reset Name</button>Now, when the user clicks on the button the resetName handler applies the LC function toUpper() using the rigAsynParams() function to the parameter and returns the directive parameter "Bingo" in uppercase letters. The value of the <input> element and the content of the "mutable" element is replaced.
If there are multiple "models", you can identify each of them by their IDs. So, let's add another <input> field with an id attribute "foo".
<input asyn:model="name" type="text" id="foo">Replace
<button asyn:click="resetName('Bingo')">Reset Name</button>with
<button asyn:click="resetName('Bingo','name','foo')">Reset Name</button>The second and third parameters are the values of the id attributes.
The resetName handler needs the following modification:
command resetName
local tParamsA, tTempA
# GET ACTION PARAMETERS AND SPECIFY TO WHICH MODEL PARAMETER(S)
# AN LC FUNCTION SHOULD BE APPLIED ACCORDING TO THE VALUE
# OF THE asyn:mutable ATTRIBUTE
put rigAsynParams(1) into tParamsA
if tParamsA[1] is empty then
put "Chico" into tParamsA[1]
end if
# SYNC MULTIPLE MODELS
put tParamsA[1] into tTempA[1]
difference tParamsA with tTempA into tModelIDsA
rigAsynRespond tParamsA[1], tModelIDsA
end resetName
The LC difference handler helps us to extract an array of id attribute values which is used as second parameter of the rigAsynRespond handler. This parameter defines all the "model" elements to be synced with the "mutable" element.
When the user clicks onto the button, the value of the two <input> elements and the content of the "mutable" element are replaced.
To call the resetName handler from global JavaScript use the ASYNergy.emit method, such as:
<script>
ASYNergy.emit('resetName', 'Bingo');
</script>The following is a variant with multiple parameters:
<script>
ASYNergy.emit('resetName', 'Bingo,name,foo');
</script>ASYNergy USER GUIDE