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

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->
Pass function parameters with turnOn In... <!-- unimportant stuff, hidden -->
<!-- unimportant stuff, hidden -->

<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>

@{
  // Use the PageService to activate turnOn
  Kit.Page.Activate("turnOn");
}

@* Passes the parameters Hello for greeting and World for name in a JSON format and executes the window.turnOnTutorial110.init function *@
<turnOn turn-on='{ "run": "window.turnOnTutorial110.init()", "data": { "greeting": "Hello", "name": "World" } }'></turnOn>
<turnOn turn-on='{ "run": "window.turnOnTutorial110.demoDeconstruct()", "data": { "greeting": "Hello", "name": "World" } }'></turnOn>

<script src="@App.Path/turn-on/_110-parameters.js"></script>

<!-- unimportant stuff, hidden -->

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;
})();