Using different data binding models

This tutorial describes how to create a button in Adobe Animate and use it with different data binding models through data binding aliases.

Creating the models

The mock models for the example are created through the following code. The text in the models is used as a button label.

engine.on("Ready", () => {
    engine.createJSModel("model1", {
        text: "Button 1"
    });

    engine.createJSModel("model2", {
        text: "Button 2"
    });

    engine.synchronizeModels();
});

The code should be in a file that is attached to the Adobe Animate document.

cohtml.js should be auto-imported through the following steps.

  1. Open the "Settings" tab.
  2. Check the "Auto import cohtml.js" checkbox.

Creating the button

The button consist of a background and a data-bound text.

  1. Draw a rectangle with the rectangle tool.
  2. Create a text element in the middle of the rectangle.
  3. Create a symbol from the text element. Select the text on stage and press F8.
  4. Create a symbol named button from the rectangle and the symbol with the text.

Adding data binding to the symbol

The text of the button should be data-bound and it should use an alias for the model, so that a different model can be used.

  1. Start editing the button symbol.
  2. Select the symbol that contains the text.
  3. Open the "Bindings" tab.
  4. Add a "bind-value" attribute with value {{#(MODEL).text}}
  5. Check the "Apply to children" box.

Creating button instances with different models

To use the button symbol it should be dragged on the stage. To apply a different data binding model the alias MODEL should be overwritten.

  1. Drag the button symbol on the stage.
  2. Wrap it in a symbol.
  3. Open the "Bindings" tab.
  4. Add an alias named "MODEL" with value "model1".
  5. Repeat the steps but make the value of the alias "model2".

Previewing the result

When the document is exported the value of the data binding expression {{#(MODEL).text}} will be resolved to {{model1.text}} for one of the symbols on stage and {{model2.text}} for the other symbol, hence they use different models.

Exporting and previewing the document should display two buttons with different texts.