Dompointer NPM

Dom Pointer

Positional Templating

<div id="example" class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>Some default panel content here.</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

import DomPointer from 'dompointer'

const el = document.querySelector('#example')
const dp = DomPointer.create(el, { comments: false })

dp.data(':0:0', 'Dom Pointer')
dp.data(':0:1', 'Pointers for a simple template engine');
dp.setAttibutes([
  { op: 'remove', 'path': ':0:0', name: 'class', val: 'panel-heading'}
  { op: 'add', 'path': ':0:0', name: 'class', val: 'panel-heading'}
])

dp.alias('heading', ':0:0')
dp.alias('body', ':0:1')

dp.data('heading', 'Dom Pointer')
dp.data('body', 'Pointers for a simple template engine');
dp.setAttibutes([
  { op: 'remove', 'path': 'heading', name: 'class', val: 'panel-heading'}
  { op: 'add', 'path': 'heading', name: 'class', val: 'panel-heading'}
])