Blaze removes iframe contents when collection changes sort order

blaze
1

I have a collection of tweets (_id, text) and I want to add the rich HTML output provided by the Twitter Embed API:

    <div id="{{_id}}">
      <span class="text-tweet">{{{text}}}</span>
      <div class="rich-tweet"><!-- will be hydrated by Twitter Embed --></div>
    </div>

The .rich-tweet div gets filled in like this:

image

The problem is that after I change the sort order of the Tweets collection, about half of the iframes are emptied out, even though no template instances get created or re-rendered (the subscription doesn’t receive any new or changed data):

image

Any idea as to why this might be? Blaze is supposed to “do the right thing” so we no longer need {{constant}}, {{isolate}} or {{preserve}}, but it’s been a while since I’ve worked with Meteor.

The code to render the rich tweet content is below:

Template.tweet.onRendered(function () {
  const templateInstance = this;
  console.log('Rendered', templateInstance.data._id);  // nothing logged when sort order changes, as expected
  twttr.widgets.createTweet(
    templateInstance.data._id,  // the Tweet ID
    templateInstance.find('.rich-tweet')
  );
});
1 Like
2

There’s a Chrome extension that lets you observe DOM changes. I believe this is it:

Maybe it can help you find where the issue is hiding.

1 Like
3

Have you tried to refactor the “rich-tweet” div into its own Blaze template? I found that this often helps to make Blaze work with 3rd party libraries modifying the DOM directly.

1 Like
4

I would second that. I put always 3rd party content into its own template. You can also then use onRendered callback to (re)populate that 3rd party content.