<my-new-component>

  <template>
    <h1>
      Hey there <span bind="name"></span>!
    </h1>
    <p>Nice to meet you</p>
  </template>

  <script>
    scope.name = scope.name || 'Randomer';
  </script>

</my-new-component>

Compile and use it...

<html>
  <head>
    <title>Using my new component</title>
  </head>
  <body>
    <my-new-component></my-new-component>
    <my-new-component name="Terry Wogan"></my-new-component>

    <script src="compel.js"></script>
    <script src="my-new-component.js"></script>
    <script>compel.load()</script>
  </body>
</html>

Output looks something like:

<html>
  <head>
    <title>Using my new component</title>
  </head>
  <body>
    <h1>Hey there Randomer!</h1>
    <p>Nice to meet you</p>

    <h1>Hey there Terry Wogan!</h1>
    <p>Nice to meet you</p>
  </body>
</html>

Attributes

All binding is used with attributes.

`bind`

Bind a scope variable to the template:

<template>
  <p bind="foo"></p>
</teamplte>
<script>
  scope.foo = 'bar';
</script>

<!-- outputs -->
<p>bar</p>

`each`

Bind an element to an array or key/value pairs:

Logic less looping

<template>
  <ul>
    <li each="people">
      <span bind="name"></span> is <span bind="age"></span> years old
    </li>
  </ul>
</template>
<script>
  scope.people = [{name: 'Luke', age: 10}, {name: 'Lucy', age: 12}];
</script>

<!-- outputs -->
<ul>
  <li>Luke is 10 years old</li>
  <li>Lucy is 12 years old</li>
</ul>

"In each" loops

<template>
  <ul>
    <li each="person in people" bind="person"></li>
  </ul>
</template>
<script>
  scope.people = ['Luke', 'Lucy'];
</script>

<!-- outputs -->
<ul>
  <li>Luke</li>
  <li>Lucy</li>
</ul>

"key, value in each" loops

<template>
  <ul>
    <li each="name, age in people">
      <span bind="name"></span> is <span bind="age"></span> years old
    </li>
  </ul>
</template>
<script>
  scope.people = {John: 10, Lucy: 12};
</script>

<!-- outputs -->
<ul>
  <li>Luke is 10 years old</li>
  <li>Lucy is 12 years old</li>
</ul>

`compel-*`

Compel bloody anything! Any attribute beginning with compel- will bind the expression and replace it's referencing attribute. E.g:

<template>
  <p compel-class="someDynamicClassName" compel-style="someDynamicStyle"></p>
</template>
<script>
  scope.someDynamicClassName = 'my-class';
  scope.someDynamicStyle = 'color:red;';
</script>

<!-- outputs -->
<p class="my-class" style="color:red;"></p>

Installation

Install the compiler with node: npm i compel.
...

FAQs

What is compel?

Is compel popular?

Is compel well maintained?

Last updated on 03 Mar 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install