t.render(func)

Whenever you are displaying a visible iframe in Trello, we want to make sure it doesn't flash when there are changes.

A good example is attachment-sections. When new attachments are added, some are removed, or other data about your Power-Up is changed, you may need to re-render your section, but Trello doesn't want to reload your iframe, as that would cause a jarring flash.

Instead, you should make sure any logic that updates your UI in visible iframes with changes should live in or be triggered by t.render. Trello will re-call t.render whenever something changes that we think might be relevant.

1
2
var t = window.TrelloPowerUp.iframe();

// you can access arguments passed to your iframe like so
// unlike logic that lives inside t.render() this will only
// be passed once, so don't rely on this for information that
// could change, for example what attachments you want to show
// in this section
var arg = t.arg('arg');

t.render(function () {
  // make sure your rendering logic lives here, since we will
  // recall this method as the user adds and removes attachments
  // from your section
  t.card('attachments')
  .get('attachments')
  .filter(function (attachment) {
    return attachment.url.indexOf('http://www.nps.gov/yell/') == 0;
  })
  .then(function (yellowstoneAttachments) {
    var urls = yellowstoneAttachments.map(function(a){ return a.url; });
    document.getElementById('urls').textContent = urls.join(', ');
  })
  .then(function () {
    return t.sizeTo('#content');
  });
});