Quick Start

Define a Component, Render with Data

HTML

First we need to import a stylesheet and ChocolateChip-UI. This is just a basic shell for the page. We have a childless unordered list #peopleList that will be the container for our component.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ChocolateChip-UI - Demo</title>
  <link rel="stylesheet" href="./css/chui-ios.css">
  <script src="js/chui.min.js"></script>
</head>
<body>
  <ui-screen>
    <nav>
      <h1>ChocolateChip-UI is Fun</h1>
    </nav>
    <section>
      <ul class="list" id='peopleList'></ul>
    </section>
  </ui-screen>
</body>
</html>

Data

Below is the data we will use.

const people = [
  { firstName: 'Joe', lastName: 'Bodoni' },
  { firstName: 'John', lastName: 'Doe' },
  { firstName: 'Wobba', lastName: 'Rango' },
  { firstName: 'Josh', lastName: 'Rutherford' }
]

// Define a state object for the data:
var peopleState = new State(people)

Component

Now that we have a document and some data, we can create a component. To do so we use new Component(). We need to tell the component what element to render the component in, what template to use, and what data. The last line tells ChocolateChip-UI to render the component:

const peopleComponent = new Component({
  element: '#peopleList',
  // Bind the component to this state object:
  state: peopleState,
  // Define its template:
  render: (person) => html`
    <li>
      <div>
        <h3>${ person.firstName }</h3>
        <h4>${ person.lastName }</h4>
      </div>
    </li>`
})

// Render the component:
peopleComponent.render()
Learn More About Components

See the Pen Simple List v5 by Robert Biggs (@rbiggs) on CodePen.