Skip to content

Components

Jump to bottom
ReactMVC edited this page Jul 1, 2023 · 4 revisions

Component in HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Elroid Example</title>
    <script src="Elroid.js"></script>
</head>

<body>
    <div id="app"></div>

    <script>
        const component = new ElComponent({
            template: `
          <h2>{{title}}</h2>
          <p>Users, {{name.1}} and {{name.2}}!</p>
          <p>Admin is, Name: {{name.3.name}} and Email {{name.3.email}}!</p>
          <button el-click="Edit">Edit Tilte</button>
      `,
            el: "#app",
            data: {
                name: {
                    1: "Hossein",
                    2: "Ali",
                    3: {
                        name: "Reza",
                        email: "h3dev.pira@gmail.com"
                    }
                },
                title: 'Custom Component',
                methods: {
                    Edit() {
                        component.update({ title: "Home" });
                    }
                }
            },
        });

    </script>
</body>

</html>

Component in JS

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App</title>
</head>

<body>
    <div id="app"></div>

    <script src="Elroid.js"></script>
    <script type="module" src="App.js"></script>
</body>

</html>

App.js

const App = new ElComponent({
    template: `
        <h1 style="{{style}}">{{title}}</h1>
        <button el-click="Edit">Edit Tilte</button>
    `,
    el: "#app",
    data: {
        title: 'Component',
        style: "color: black;",
        methods: {
            Edit() {
                App.update({ title: "Home", style: "color: red;" });
            }
        }
    }
});

Next: Routing

Clone this wiki locally