toggle-edit-view

JS-Templator

Generates matched view-only and editable templates for JavaScript objects.

ROADMAP

• Using Polymer and handlebars
• Type-based dispatch
• Auto-wiring changes
• Using normal HTML elements and es6 template strings

Example

let templ = Templator.wrap({
  foo: true,
  bar: 3,
  baz: new Date()
});
 
templ.getTemplate(); // returns null, we haven't told it to watch any properties yet
templ.watch('foo', 'My Property');

Now calling .getTemplate() will return a document fragment containing the following:

<table class="editable-view">
  <tr class="edit-toggle">
    <td>My Property</td>
    <td>{{foo}}</td>
  </tr>
  <tr class="edit-toggle is-hidden">
    <td>
      <paper-dropdown-menu label="My Property" class="edit-changes" prop-name="foo">
        <paper-menu class="dropdown-content">
          <paper-item>False</paper-item>
          <paper-item>True</paper-item>
        </paper-menu>
      </paper-dropdown-menu>
    </td>
  </tr>
</table>