Skip to content

Simple syntax

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

Display data in 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>Home</title>
</head>

<body>
    <div id="app">
        <h1>{{ title }}</h1>
    </div>


    <script src="Elroid.js"></script>

    <script>
        const App = new Elroid({
            el: "#app",
            data: {
                title: "Home"
            }
        });
    </script>
</body>

</html>

Update data in HTML

To define a function that can be used in el-click, Just put it under methods. Below is an example for updating data in Elroid.

<!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>Home</title>
</head>

<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <button el-click="Edit">Update Title</button>
    </div>


    <script src="Elroid.js"></script>

    <script>
        const App = new Elroid({
            el: "#app",
            data: {
                title: "Home",
                methods: {
                    Edit() {
                        App.update({ title: "About" });
                    }
                }
            }
        });
    </script>
</body>

</html>

Multiple data in 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>Home</title>
</head>

<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <p>my name is {{users.myInfo.name}} and my email is: {{users.myInfo.email}}</p>
        <p>web page address is {{url}}</p>
        <p>my friends: {{ users.1 }} and {{ users.2 }}</p>
    </div>


    <script src="Elroid.js"></script>

    <script>
        const App = new Elroid({
            el: "#app",
            data: {
                title: "Home",
                url: "example.com",
                users: {
                    1: "Ali",
                    2: "Hossein",
                    myInfo: {
                        name: "Hossein",
                        email: "admin@site.com"
                    }
                },
            }
        });
    </script>
</body>

</html>

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>

Functions in HTML

To define a function that can be used in el-click, Just put it under methods.

<!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>Home</title>
</head>

<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <button el-click="Edit">Update Title</button>
        <br><br>
        <button el-click="Default">Default</button>
        <br><br>
        <button el-click="Alert">Show Alert</button>
    </div>


    <script src="Elroid.js"></script>

    <script>
        const App = new Elroid({
            el: "#app",
            data: {
                title: "Home",
                methods: {
                    Edit() {
                        App.update({ title: "About" });
                    },
                    Default() {
                        App.update({ title: "Home" });
                    },
                    Alert() {
                        alert("Welcome to " + this.title);
                    }
                }
            }
        });
    </script>
</body>

</html>

Next: Components

Clone this wiki locally