How to use runtime state?

[J2thearo]

Hi @rowanc1,

I have recently been working with iooxa again in more detail and have come across a few questions.
Most of all it is about the access to components. In your answer to #10 you finally mentioned two ways to manipulate component values:

The second option was the most suitable and intuitive for me in this case. I also tried to understand the first option, but was not even able to access the iooxa variable. You mentioned in the last release that iooxa is available in the window. Which modules do I have to import for this? And can you please explain what the command

const v = iooxa.createVariable('scope.name', 3);

does exactly? I thought at first that I would specify the variable from the html document in the argument of this function but that doesn't seem to be the case. But I do not create a new html element with it either. How does this help me when I try to manipulate the value of an iooxa html component?

Thanks a lot!

[rowanc1]

To get iooxa running, are you using something like:

<script async src="https://unpkg.com/@iooxa/article"></script>

If so, there should be a global variable put onto the page (here), the interface that is provided for that variable is here. Try going to https://iooxa.dev, opening up the console - and there is an iooxa variable in the global namespace.

You should be able to create new variables using the createVariable function, and use getVariableByName or select the DOM and set existing variables.

The command

const v = iooxa.createVariable('scope.name', 3);

creates a new variable that does not have a DOM element, this is equivalent to:

<r-scope name="scope">
  <r-var name="name" value="3"></r-var>
</r-scope>

Using the javascript API is lower level, and likely doesn't need to be used if you are scripting with the components, probably the best way is to use the HTML and then if you need access to the variable, use the getVariableByName function or select it in the DOM.

Once you have the variable, you can update or get the value of it using:

// Select it in the dom
const r = document.getElementById('id').$runtime;
// OR use iooxa to get it by name
const r = iooxa.getVariableByName('scope.name');
// Then you can get access to the variable value (or change the value etc.):
r.get();

Hopefully that helps a bit, happy to clarify or further explain. It might be helpful to explain your use case and I can maybe give some further pointers.

[J2thearo]

Thanks for the quick answer! In fact, iooxa exists when I inspect the html document in the console.

But when I try to access iooxa in the linked index.js file, the variable is not recognized and I get a reference error.

Here is my index.html setup

I can't find any explanation for it.

[J2thearo]

Ok, I just noticed that the error is caused by the async inside the <script> tag. Without it, it works fine.

[rowanc1]

Almost got to commenting on the async before you. Glad you figured it out!

The other thing that might help is that you can put an arbitrary function in the callbacks of sliders, etc.

<script>
function hello(x, y) {
  console.log(`The values of x and y is: ${x}, ${y}`)
}
</script>
<r-var name="x" value="20"></r-var>
<r-var name="y" value="40"></r-var>
<r-button dense :click="hello(x, y)"></r-button>