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>

Display data in HTML

To define a function that can be used in el-click, just put "A" under the 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>
Clone this wiki locally