Lit-element: 2 way data binding not working

[BrandiATMuhkuh]

I'm expecting 2 way data binding to work similar to polymer templates but I can't get it to work.
For example using a <paper-toggle-button checked="${toggled}"> only works in one direction (reading, but not writing).

I have also tried <paper-toggle-button checked="[[${toggled}]]"> and <paper-toggle-button checked="[[toggled]]">

[itsjustbrian]

This is the expected behaviour since you aren't using Polymer's templating system with lit-element, you are using lit-html's, which doesn't support 2-way binding for performance reasons. [[ ]] and {{ }} also don't mean anything to lit-html. The correct way to pass data upwards in lit (and in other one way systems like React), is to use events. In your case, you should listen for on-checked-changed on the paper toggle, and then create a handler that sets the toggled property to the value you get from the event.

[BrandiATMuhkuh]

thank you that's good to know. I was expecting '[[ ]]' to work because this element is part of PolymerLabs. However, since polymer 3 is completely written in JS it's a much better approach to use listeners :)

[BrandiATMuhkuh]

I tried the approach with the event listener but it seems to not be able to keep the right scope. Which means, the this word in the event listener references the element that created the event, but not the polymer element.
I have also tried to add the event listener to the render({toggled, onCheckedChanged} but no luck.

import { LitElement, html } from '../node_modules/@polymer/lit-element/lit-element.js'
import "../node_modules/@polymer/paper-toggle-button/paper-toggle-button.js";

export class TestPageTwo extends LitElement {

  constructor() {
    super();
    this.toggled = false;
  }

  // properties, observers, etc. are identical to 2.x
  static get properties() {
    return {
      toggled: Boolean
    }

  }

  onCheckedChanged(e) {
    this.set("toggled", e.detail.value);
  }

  render({toggled, onCheckedChanged}) {
    return html`
    ${toggled}
    <paper-toggle-button checked="${toggled}" on-checked-changed="${this.onCheckedChanged}"></paper-toggle-button>
     `;
  }
}

customElements.define('test-page-two', TestPageTwo);

[kenchris]

<paper-toggle-button checked="${toggled}" on-checked-changed="${this.onCheckedChanged.bind(this)}"></paper-toggle-button>

[kenchris]

Just bind it either before or when you attach it.

"this" is supposed to be the element on which the event is fired... so paper-toggle-button, so if you don't want that, rebind it.

You could also do it in the constructor

  this.onCheckedChanged = this.onCheckedChanged.bind(this)

[BrandiATMuhkuh]

Wonderful. Thanks you. I thought I need to you .bind(this), but didn't know how. Now it works.
Q: Will the API for that change in the future to automate the .bind() process?

[BrandiATMuhkuh]

For completion. Here is the working element

import { LitElement, html } from '../node_modules/@polymer/lit-element/lit-element.js'
import "../node_modules/@polymer/paper-toggle-button/paper-toggle-button.js";

export class TestPageTwo extends LitElement {

  constructor() {
    super();
    this.toggled = false;
  }

  // properties, observers, etc. are identical to 2.x
  static get properties() {
    return {
      toggled: Boolean
    }
  }

  onCheckedChanged(e) {
    this.toggled = e.detail.value;
  }

  render({toggled}) {
    return html`
    ${toggled}
    <paper-toggle-button checked="${toggled}" on-checked-changed="${this.onCheckedChanged.bind(this)}"></paper-toggle-button>
     `;
  }
}

customElements.define('test-page-two', TestPageTwo);

[FluorescentHallucinogen]

@BrandiATMuhkuh I believe _render should be used instead of render in your last code. :wink:

[FluorescentHallucinogen]

But what if I want to use <mwc-switch> (which is also based on lit-element) instead of <paper-toggle-button>?

The problem is that <mwc-switch> has no the checked-changed custom event unlike <paper-toggle-button>.

@azakus @sorvell PTAL.

[FluorescentHallucinogen]

What about something like Polymer's notify (automatic property change notification events) to make upward data flow easier?

[web-padawan]

@FluorescentHallucinogen this is the new reality, where no upward data flow is supposed to be always kept in mind. Still the Web Component should produce events, but I guess it would make sense to make the switch component more aligned with the native input and produce a change event.

[FluorescentHallucinogen]

@web-padawan Could you please explain what's wrong with two-way data binding (upward data flow)? Two-way data binding was (is) my favorite feature of Polymer. What are the advantages of unidirectional data flow?

[FluorescentHallucinogen]

I've found https://github.com/DiiLord/lit-element and it has notify.

@justinfagnani @DiiLord What about to port it to this element?

[web-padawan]

Welcome to 2018, everyone is writing his own lit-element implementation 😀

[FluorescentHallucinogen]

lit-html-brackets also looks very interesting.

[FluorescentHallucinogen]

HTML Template Instantiation proposal also adopts mustache syntax as standardized template language.