turnOn Tutorials

Tutorial Home › turnOn

Basic turnOn usage and activation

#3 Passing parameters with turnOn

Passing module parameters with turnOn

Requirements

2sxc 7.00

Resources

Pass function parameters with turnOn

In this page turnOn passes parameters to a JavaScript function. The passed parameters then get deconstructed and used for DOM manipulation.

In this tutorial you'll learn how to:

Pass parameters to JavaScript functions using turnOn.
Deconstruct passed parameters

Look at the text below to see the effect.

Output

turnOn Example 1 hasn't started yet.

turnOn Example 2 hasn't started yet.

<div id="turn-on-example">
  turnOn Example 1 hasn't started yet.
</div>
<div id="turn-on-example-deconstruct">
  turnOn Example 2 hasn't started yet.
</div>

@* Passes the parameters Hello for greeting and World for name in a JSON format and executes the window.turnOnTutorial110.init function *@

 @* This tutorial uses turnOn, see turnOn tutorials *@
@{
  var data = new {
    greeting = "Hello",
    name = "World"
  };

    var dataDemo = new {
    greeting = "Hello",
    name = "Moon"
  };
}
@Kit.Page.TurnOn("window.turnOnTutorial110.init()", data: data)
@Kit.Page.TurnOn("window.turnOnTutorial110.demoDeconstruct()", data: dataDemo)

<script src="@CmsContext.View.Path/110-parameters.js" @Kit.Page.AssetAttributes()></script>

Source Code of 110-parameters.js// Use an IFFE to ensure the variables are not exposed globaly
// See https://developer.mozilla.org/en-US/docs/Glossary/IIFE
(() => {
  // Simple init with Data object
  function init(data) {
    // Example element gets found in the DOM
    const exampleElement = document.querySelector("#turn-on-example")
    // Parameters get displayed in the DOM
    exampleElement.innerText = `turnOn has passed the parameters: ${data.greeting} ${data.name}!`;
  }
  
  // This is a more modern JS feature to deconstruct parameters
  // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
  function demoDeconstruct({greeting, name}) {
    // Example element gets found in the DOM
    const exampleElement = document.querySelector("#turn-on-example-deconstruct")
    // Parameters get displayed in the DOM
    exampleElement.innerText = `turnOn has passed the parameters: ${greeting} ${name}!`;
  }
  
  const tt = window.turnOnTutorial110 = window.turnOnTutorial110 || {};
  tt.init = tt.init || init;
  tt.demoDeconstruct = tt.demoDeconstruct || demoDeconstruct;
})();

Basic turnOn usage and activation

#3 Passing parameters with turnOn

Passing module parameters with turnOn

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@using ToSic.Razor.Blade;
@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h2>Pass function parameters with turnOn</h2>
      <p>In this page turnOn passes parameters to a JavaScript function. The passed parameters then get deconstructed and used for DOM manipulation.</p>
      <br>
      In this tutorial you'll learn how to:
      <ul>
        <li>
          Pass parameters to JavaScript functions using turnOn.
        </li>
        <li>
          Deconstruct passed parameters 
        </li>
      </ul>
      Look at the text below to see the effect. 
    </div>
  </div>

  <div id="turn-on-example">
    turnOn Example 1 hasn't started yet.
  </div>
  <div id="turn-on-example-deconstruct">
    turnOn Example 2 hasn't started yet.
  </div>

  @* Passes the parameters Hello for greeting and World for name in a JSON format and executes the window.turnOnTutorial110.init function *@

   @* This tutorial uses turnOn, see turnOn tutorials *@
  @{
    var data = new {
      greeting = "Hello",
      name = "World"
    };

      var dataDemo = new {
      greeting = "Hello",
      name = "Moon"
    };
  }
  @Kit.Page.TurnOn("window.turnOnTutorial110.init()", data: data)
  @Kit.Page.TurnOn("window.turnOnTutorial110.demoDeconstruct()", data: dataDemo)

  <script src="@CmsContext.View.Path/110-parameters.js" @Kit.Page.AssetAttributes()></script>



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })