Skip to main content

Manual Binding via the API

The Visual Component also provides a way to control and update the 3D product manually using JavaScript methods, instead of via the automatic DOM binding (which uses the data-av-property and data-av-value attributes).

To update the product manually, call the setValue() method available on the product, passing in the property and the value to be updated.

HTML
<atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5">
<av-product id="my-product" namespace="my_namespace" name="my_product_name"></av-product>
</atlatl-visual>

<button>Update the product</button>
JS
const myProduct = document.getElementById('my-product')
const myButton = document.querySelector('button')

// Update a property with a new value on a single button click
myButton.addEventListener('click', () => {
myProduct.product.setValue('some_property', 'new_value')
})

This may be useful for making more complex updates on multiple properties and values at once.

JS
const myProduct = document.getElementById('my-product').product
const myButton = document.querySelector('button')

// Update multiple properties to new values on a single button click
myButton.addEventListener('click', () => {
myProduct.setValue('first_property', 'new_value')
myProduct.setValue('second_property', 'another_new_value')
myProduct.setValue('third_property', [255, 255, 255])
})

Full code example

index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
<!-- Link to manual binding scripts -->
<script src="scripts.js" defer></script>
<!-- Link to the Visual Component's scripts -->
<script src="https://builds.dopple.io/atlatl-visual-component/releases/current/index.js" defer></script>
</head>
<body>
<!-- The Visual Component -->
<atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5">
<av-product id="my-product" namespace="my_namespace" name="my_product_name"></av-product>
</atlatl-visual>
<!-- Button to set new properties/values on the product -->
<button>Update the product</button>
</body>
</html>