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

HTML
JS

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>

scripts.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​

Full code example