Examples/aurelia-script/index.html

<html>

<head>
    <title>Aurelia Script Example</title>
</head>

<body>
    <h1>Aurelia Script Example</h1>
    <secion id="content">
        <p>Static Content</p>
    </secion>
    <script src='https://unpkg.com/aurelia-script@1.5.2'></script>
    <script>
        // "Import" aurelia components
        const { InlineViewStrategy } = au;
        const aurelia = new au.Aurelia();

        // Configure Aurelia
        aurelia.use
            .standardConfiguration()
            .developmentLogging();

        // Bootstrap application with Aurelia
        aurelia.start()
            .then(() => aurelia.setRoot(
                // Define inline component as the root
                // (this is normally a reference to external file like app.js)
                class DynamicButton {
                    message = "Dynamic";

                    cycleMessage() {
                        if (this.message === 'Dynamic') {
                            this.message = 'Awesome';
                        } else {
                            this.message = 'Dynamic';
                        }
                    }

                    getViewStrategy() {
                        return new InlineViewStrategy(`
                        <template>
                            <p>\${message} content</p>
                            <button click.delegate="cycleMessage()">Change</button>
                        </template>
                        `);
                    }
                },
                // Specify the element where Aurelia will be hosted in
                document.getElementById('content')));
    </script>
</body>

</html>