diff --git a/docs/rules/no-template-arrow.md b/docs/rules/no-template-arrow.md index 69f6218..68a9543 100644 --- a/docs/rules/no-template-arrow.md +++ b/docs/rules/no-template-arrow.md @@ -7,14 +7,31 @@ loss. Instead, you should do something like so: ```ts -_render() { - return html``; -} +class MyElement extends LitElement { + render() { + return html``; + } -_onClick() { ... } + _onClick() { ... } +} ``` -As lit will automatically bind it to the correct context. +As LitElement will automatically bind event listeners to the correct context, or: + +```ts +class MyElement extends LitElement { + constructor () { + super(); + this.someFunc = this.someFunc.bind(this); + } + + render() { + return html``; + } + + someFunc() { ... } +} +``` ## Rule Details diff --git a/docs/rules/no-template-bind.md b/docs/rules/no-template-bind.md index bac3686..db23863 100644 --- a/docs/rules/no-template-bind.md +++ b/docs/rules/no-template-bind.md @@ -7,14 +7,32 @@ loss. Instead, you should do something like so: ```ts -_render() { - return html``; +class MyElement extends LitElement { + render() { + return html``; + } + + _onClick() { ... } } +``` + +As LitElement will automatically bind event listeners to the correct context, or: -_onClick() { ... } +```ts +class MyElement extends LitElement { + constructor () { + super(); + this.someFunc = this.someFunc.bind(this); + } + + render() { + return html``; + } + + someFunc() { ... } +} ``` -As lit will automatically bind it to the correct context. ## Rule Details diff --git a/src/rules/no-template-arrow.ts b/src/rules/no-template-arrow.ts index b7230e5..a4f88ee 100644 --- a/src/rules/no-template-arrow.ts +++ b/src/rules/no-template-arrow.ts @@ -19,9 +19,9 @@ const rule: Rule.RuleModule = { }, messages: { noArrow: - 'Arrow functions must not be used in templates, ' + - 'a method should be passed directly like `${this.myMethod}` as it ' + - 'will be bound automatically.' + 'Arrow functions should not be used in templates. ' + + 'LitElement event bindings are bound automatically, ' + + 'otherwise a method/function should be bound outside the render method (e.g. in the constructor) beforehand' } }, diff --git a/src/rules/no-template-bind.ts b/src/rules/no-template-bind.ts index e8e552a..545ec70 100644 --- a/src/rules/no-template-bind.ts +++ b/src/rules/no-template-bind.ts @@ -20,8 +20,7 @@ const rule: Rule.RuleModule = { messages: { noBind: '`.bind` must not be used in templates, ' + - 'a method should be passed directly like `${this.myMethod}` as it ' + - 'will be bound automatically.' + 'a method should be bound once in the constructor and passed directly like `${this.myMethod}`.' } },