Может ли освещенный элемент отследить переменную вне ее области видимости - PullRequest
Новая
       35

Может ли освещенный элемент отследить переменную вне ее области видимости

0 голосов
/ 28 октября 2019

В моем lit-элементе я рендерил что-то на основе внешней переменной. Как узнать, обновляется ли эта переменная? 

import { LitElement, html } from 'lit-element';
import './element01.js';

class Layout extends LitElement {
    createRenderRoot(){ return this; }

    static get properties() {
      return {
        settings: { Object }
      };
    }

    constructor() {
      super();
    }

    render() {
      return html`
        ${(settings.foo === 'bar')? html`<my-element01 />` : null}
      `;
    }
}
customElements.define('my-layout', Layout);

Объект настроек изменяется снаружи, как этот элемент может узнать об обновлении? Я не использую другие фреймворки.

Ответы [ 2 ]

1 голос
/ 30 октября 2019

Файл index.html всегда должен иметь 

<my-app></my-app>

В элементе my-app вы сможете использовать все функции litElement, такие как 

 class MyApp extends LitElement {

      static get properties() {
        return {
          prop: {type: Object},
        };
      }

      render() {
        return html`
        <my-element .prop="${this.prop}"</my-element>
        <my-server  .prop="${this.prop}"</my-server>
        <button @onClick='${(e) => this.prop += 1}' >change the settings value</button>
        `;
      }
    }
1 голос
/ 30 октября 2019

Вот один пример, который я попытался проиллюстрировать. settings свойство изменено за пределами litElement и выполнено в litElement.

demo

index.html 

  ...
<my-layout></my-layout>
<br>
<button onClick="_buttonClicked()" >change the settings value</button>
<script>
  document.querySelector('my-layout').settings={foo:"bar"};
   function _buttonClicked (e) { 
     document.querySelector('my-layout').settings = {foo:"baz"};    
 }
</script>

my-layout: 

import { LitElement, html } from 'lit-element';
//import './element01.js';

class Layout extends LitElement {
    createRenderRoot(){ return this; }

    static get properties() {
      return {
        settings: { Object }
      };
    }

    constructor() {
      super();

    }

    render() {
      return html`
        ${this.settings.foo === 'bar'? html`<span> element01 will be rendered</span>` : null}
      `;
    }
}
customElements.define('my-layout', Layout)
  • Я сделал некоторые исправления синтаксиса
...