Helpers

Deprecated

Helpers are now built in Providers and built in Providers will soon be separate packages

---

Jagwah Helpers are small utilities that a regular web application would use.

Overview

Helpers provide an easy way to do common things and they will work well with tree-shaking so if you don't use them they won't bloat your builds. You can access Helper's from the Jagwah.Helpers property.

import { Helpers } from 'jagwah';
​
Helpers[name](...);

sync

The sync Helper is basically a shallow property setter for any HTMLElement objects that have a value property, it's a one-way binding method that will update your object[property] with the elements value when called.

Usage

Helpers.sync(object, property);

Example

The example below will set the email and password properties of the $account.signForm to the value of the input element when the onchange event occurs.

templates/signup.ts

import { Jagwah, Helpers, Template } from 'jagwah';
import { AccountProvider } from '../providers';
​
@Template('signup-form')
export class SignUpForm {
  constructor(
    private renderer: Jagwah.template.render,
    @Inject('$account') private $account: AccountProvider,
  ) {
    return renderer`
      <form onsubmit=${$account.signIn.bind($account)}>
        <input type="email" onchange=${Helpers.sync($account.signUpForm, 'email')}>
        <input type="password" onchange=${Helpers.sync($account.signUpForm, 'password')}>
        <input type="submit">
      </form>
    `
  }
}

providers/account.ts

import { Jagwah, Provider } from 'jagwah';
​
@Provider('$account')
export class AccountProvider {
  public signUpForm: { email: string, password: string };
  constructor() {}
	
  public async signUp() { ... }
}
​
hyperNg.provider(AccountProvider);