examples/bp-bind.html

<!DOCTYPE html>
<html>
<head>
    <title>Ballpen.js Directive - 'bp-bind'</title>
    <style type="text/css">
      [bp-shade] {
        display: none;
      }
    </style>
</head>
<body>

<div id="app" bp-shade>
  <h1>Ballpen.js Directive - 'bp-bind'</h1>

  <p class="bp-bind-name" bp-bind:name="name">{{ name }}</p>
  <p class="bp-bind-version" bp-bind:data-version="version">{{ version }}</p>
  <br/>
  <!-- Bind multiple attributes with an object like style -->
  <p class="bp-bind-multi" bp-bind="{multi-bind-version:attrs.version, multi-bind-name:attrs.name}">Multi-Bind</p>
</div> 

<script src="../dist/ballpen.min.js"></script>
<script type="text/javascript">

    let data = {
        name: "Ballpen.js",
        version: "1.0",
        attrs: {
          name: 'attr.ballpen.js',
          version: 'attr.1.0'
        }
    };

    new Ballpen("#app", {
        data: data
    });

</script>
</body>
</html> 