How to use runtime state? about article HOT 4 CLOSED

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.

from article.

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.

from article.

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

from article.

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>

from article.