Synergy

Events

Synergy assumes any attribute name prefixed with "on" to point to an event handler on your viewmodel.

Viewmodel:

{
  sayHello: function() {
    alert("hi!");
  }
};

Template:

<button onclick="sayHello">Say hello</button>

Function arguments

When triggering events from within repeated blocks it can be useful to pass data back into your viewmodel so that you have direct access to the relevant list item. You can do this using the function invocation syntax...

Viewmodel:

{
  artists: [
    {
      name: 'pablo picasso',
      tags: [
        'painter',
        'sculptor',
        'printmaker',
        'ceramicist',
        'theatre designer',
      ],
    },
    {
      name: 'salvador dali',
      tags: [
        'painter',
        'sculptor',
        'photographer',
        'writer'
      ],
    },
  ],
  select(artist, tag) {
    //...
  },
}

Template:

<template each="artist in artists">
  <article>
    <h4>{{ artist.name }}</h4>
    <ul>
      <template each="tag in artist.tags">
        <li onclick="select(artist, tag)">{{ tag }}</li>
      </template>
    </ul>
  </article>
</template>

Event object

You can access the native event object using the fat arrow syntax:

Viewmodel:

<button onclick="e => sayHello(e)">Say hello</button>