Skip to content

Create tool to scaffold html tree from an example json #42

@GrosSacASac

Description

@GrosSacASac

One of the strength of this framework is the mapping between graphs (variables) and DOM.

Everything has to be done manually.

Create a tool that takes example JSON and outputs example HTML, the result could then be added directly or configured with extra structure and styling.

For example given

[
        {
            picture: "./images/boss.jpg",
            bio: "Loves biking and skating"
        },
        {
            picture: "./images/sister.jpg",
            bio: "Drinks tons of café."
        }
]

output could be

    <template data-template="user-element">
            <img data-variable="picture" alt="user-picture" class="user-picture">
            <p data-variable="bio" class="user-bio">SHORT BIO</p>
    </template>


    <div data-list="users-user-element"></div>

then after adding it to html d.feed({users: exampleGraph}); would just work

See other examples at https://dom99.now.sh/documentation#examples1

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions