Introduction

Trame is driven by Python but sometime, JavaScript expression needs to be written. This document aims to gather tools and utilities available on the “client side” for you to use.

State variables

The first thing you have access is obviously the various state variables that you’ve defined.

from trame.app import get_server

server = get_server()
state = server.state

state.welcome = "hello"
state.name = "seb"

# ...
with layout:
   vuetify.VTextField(v_model=("welcome",)) # welcome is a reactive variable that is linked to state.welcome from Python
   vuetify.VTextField(v_model=("name",))    # name is a reactive variable that is linked to state.name from Python

Methods available

On top of the state variables, a couple of methods are also available for you to use when needed.

set(key, value)

Given a variable name as a string you can set its value to something new like shown in the example below.

Parameters:

• key (str) – The name of the state variable to set

• value – The value to set that variable to

vuetify.VTextField(v_model=("var_name", "a"))
vuetify.VTextField(v_model=("var_value", "value"))
vuetify.VBtn("Set value", click="set(var_name, var_value)")

get(key=null)

Given a variable name, its value will be returned. If nothing is provided, the full state will be returned as a dictionary.

Parameters:

key (str) – The name of the state variable to retrieve

Returns:

Return the value stored within that state variable

setAll(obj={})

Given an object, set all key/value pair into the state before flushing it.

Parameters:

obj ({}) – Map gathering the set of key/value pair to update

vuetify.VBtn("Reset many vars", click="setAll({ a: 1, b: true, c: 'hello' })")

flushState(...keys)

Force push one or many local state variables to the server. This is especially useful when dynamically editing nested content.

Parameters:

...keys (str) – Names of all the variables that needs to be push back to Python

# ...
state.slider_values = [1, 2, 3, 4]

with layout:
    vuetify.VSlider(
        v_for="v, index in slider_values",
        key="index",
        v_model="slider_values[index]",
        change="flushState('slider_values')"
    )

registerDecorator(...args)

Used internally to register special serializers for exchanging data between Python and JS.

trigger(name, args=[], kwargs={})

Call a method from JavaScript to Python.

Parameters:

• name (str) – Name of the trigger to execute

• args ([]) – List of arguments to provide to the method call

• kwargs ({}) – List of keyword arguments to provide to the method call

Returns:

A promise matching the return value of the Python method.

@ctrl.trigger("exec_prog")
def exec_function(*args, **kwargs):
    print("exec_function", args, kwargs)

# ...
with layout:
    vuetify.VBtn("Exec", click="trigger('exec_prog', [1, 2, 3], { b: 2 })")

or you can do

def exec_function(*args, **kwargs):
    print("exec_function", args, kwargs)

# ...
with layout:
    vuetify.VBtn("Exec", click=(exec_function, "[1, 2, 3]", "{ b: 2 }"))

and even

def exec_function(*args, **kwargs):
    print("exec_function", args, kwargs)

# ...
with layout:
    vuetify.VBtn("Exec", click=f"trigger('{ctrl.trigger_name(exec_function)}', [1, 2, 3], { b: 2 })")

getRef(name)

Lookup a Vue.js reference within your template.

Parameters:

name (str) – Name of the ref to lookup

Returns:

The reference to vue component with that ref

execAction(action)

This allow to call method or update a property on a given vue component using its ref.

The action object can only be one of the two structures:

action = {ref, type: 'method', method, args}
action = {ref, type: 'property', property, value}

Variables available

tts

tts stands for “Template Time Stamp” which represent an integer that will only change when a trame layout is getting updated.

utils

This object aims to be editable by the user so custom helper functions could be used. By default, we currently the following content.