no-template-bind.md

Disallows .bind in templates (no-template-bind)

Binding functions inside templates will result in them being created every time a render occurs, resulting in performance loss.

Instead, you should do something like so:

_render() {
  return html`<x-foo @event=${this._onClick}>`;
}

_onClick() { ... }

As lit will automatically bind it to the correct context.

Rule Details

This rule disallows using .bind in templates.

The following patterns are considered warnings:

html`<x-foo @event=${this.someMethod.bind(this)}>`;
html`<x-foo @event=${someFunc.bind(this)}>`;

The following patterns are not warnings:

html`foo ${someVar}`;

When Not To Use It

If you don't care about rendering performance, then you will not need this rule.