New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  content: 'hello',
  
  actions: {
		'hello': function() { this.set('content', 'hello'); },
    'html': function() { this.set('content', '<strong>hello</strong>'); },
    'undefined': function() { this.set('content', undefined); },
		'null': function() { this.set('content', null); },
		'empty': function() { this.set('content', ''); },
    'safe': function() { this.set('content', Ember.String.htmlSafe('')); },
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

<div>\{{{content}}} renders as {{{content}}}. [WE DO NOT EXPECT ANY CONTENT AFTER HERE]</div>

<br>

<div>\{{content}} renders as {{content}}. [WE DO NOT EXPECT ANY CONTENT AFTER HERE]</div>

<br>

<div>
  Set <code>content</code> to 
  <button {{action "hello"}}>hello</button>
  <button {{action "html"}}>&lt;strong&gt;hello&lt;/strong&gt;</button>
  <button {{action "undefined"}}><code>undefined</code></button>
  <button {{action "null"}}><code>null</code></button>
  <button {{action "empty"}}>empty string</button>
  <button {{action "safe"}}>empty safe string</button>
</div>

<br>

<p>
	After clicking any of the empty cases (
  	<code>undefined</code>,
    <code>null</code>,
    empty string or
    empty safe string
  ), any further updates in the div containing the triple curlies will render in correctly.
</p>

<p>
	In addition, after clicking empty safe string, the same problem will happen for the div containing the double curlies as well.
</p>

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}