Skip to content

Model Parameters

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

The Controller

The View

Using Parameters from Global JavaScript

Suppose we want to increase or decrease a number displayed on the page using buttons. These buttons should call a controller handler passing parameters that determine the amount by which the number should be increased or decreased.

The Controller

The controller asynIncDec.lc loads the ASYNergy library, sets the initial number, and loads the asynIncDecView.lc view. Of course, the controller includes the handler (alterNum in this case) that is called by the ASYNergy AJAX request.

<?lc

put "asynIncDec,index,alterNum" into gControllerHandlers


command asynIncDec
  rigLoaderLoadLibrary "ASYNergy"
end asynIncDec


command index
  # INITIAL VALUE
  put 100 into gData["counterVal"]
  
  get rigLoadView("asynIncDecView")
end index


command alterNum
  local tParamsA
  
  put rigAsynParams() into tParamsA
  
  if tParamsA[1] is "+" then
    rigAsynRespond rigAsynElemData("counterData") + tParamsA[2]

  else

    rigAsynRespond rigAsynElemData("counterData") - tParamsA[2]
  end if
end alterNum

The alterNum handler calls the rigAsynParams() function, which returns the "model" parameters. The handler checks if the first parameter is "+" or "-". If it is "+", the number enclosed by the tags of the "mutable" element is increased by the value of the second parameter. If the first parameter is "-" the number is decreased. The function rigAsynElemData("counterData") returns the current number. "counterData" is the value of the asyn:transmit directive of the "mutable" element.

The View

The view asynIncDecView.lc includes two buttons and a paragraph for the number that can be changed.

<!DOCTYPE html>
<html>
  <head>
	  <meta charset="utf-8">
  </head>

  <body>
    <div style="float: left;margin-right: 20px;">

      <button asyn:click="alterNum('-','5')">-</button>

    </div>
    
    <div style="float: left;margin-top: -12px;margin-right: 20px;">

      <p asyn:mutable="counter" asyn:transmit="counterData">[[gData["counterVal"] ]]</p>

    </div>
    
    <div>
      <button asyn:click="alterNum('+','5')">+</button>
    </div>

    [[gData["asynergyScript"] ]]
  </body>
</html>

The buttons both have an asyn:click directive with the same value but different parameters. To add parameters to the directive, use comma-delimited, single-quoted strings enclosed in parentheses like <directive>="<value>('param1','param2',...)". The "mutable" element has an additional directive: asyn:transmit="counterData". This makes sure that the number is added to the payload on each request.

Note: In this example, the inner HTML or content of the "mutable" element is updated even though the attribute value of the "mutable" element does not match any of the "model" attribute values. This works because there is only one "mutable" element. If there were more, you would have to address certain "mutable" elements using additional "model" parameters. Please see chapter Model and Action Parameters for more information.

Using Parameters from Global JavaScript

To change the number from global JavaScript, you can use ASYNergy.emit method, e.g.

<script>

  ASYNergy.emit('alterNum', '+,5');
  
</script>

or

<script>

  ASYNergy.emit('alterNum', '-,5');
  
</script>

Parameters are comma-delimited and enclosed as a whole in single quotes. Currently, the parameters must match those of the "model" elements.

ASYNergy USER GUIDE

Clone this wiki locally