Skip to content

Instantly share code, notes, and snippets.

@kylebuch8

kylebuch8/simple-pfelement-constructor-delay-render.js

Last active March 20, 2019 17:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kylebuch8/41cddb6eae056094486191bf03fcf6a9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kylebuch8/41cddb6eae056094486191bf03fcf6a9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kylebuch8 revised this gist Mar 20, 2019. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions simple-pfelement-constructor-delay-render.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,14 +12,13 @@ class MySimplePfelement extends PFElement {
    super(MySimplePfelement, { delayRender: true });

    this.data = {};
    this._handleFetch = this._handleFetch.bind(this);
    this._fetchData();
    }

    _fetchData() {
    fetch("someapi.json")
    .then(res => res.json())
    .then(this._handleFetch);
    .then(() => this._handleFetch);
    }

    _handleFetch(data) {
  2. kylebuch8 created this gist Mar 18, 2019.
    33 changes: 33 additions & 0 deletions simple-pfelement-constructor-delay-render.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    // the location of pfelement.js may be different if you're not building an element in the
    // PatternFly elements repository
    import PFElement from "../pfelement/pfelement.js";

    class MySimplePfelement extends PFElement {
    constructor() {
    // make sure we call super() first with the class we're using
    // as the first argument

    // the second argument in super() is an object with delayRender: true
    // because we don't want the HTML template to be rendered immediately
    super(MySimplePfelement, { delayRender: true });

    this.data = {};
    this._handleFetch = this._handleFetch.bind(this);
    this._fetchData();
    }

    _fetchData() {
    fetch("someapi.json")
    .then(res => res.json())
    .then(this._handleFetch);
    }

    _handleFetch(data) {
    this.data = data;

    // be sure to call this when you are ready for the HTML template
    // to be displayed in the shadow root
    // render() is a method on the PFElement class
    this.render();
    }
    }