jwahyoung · December 13, 2016 18:52
diff --git a/app.html b/app.html
 <template>
  <h1>Object binding inside if - view caching?</h1>
  <p>Object tags do not appear to be re-rendered inside an if binding. This means that object content does not get refreshed when the if binding changes if fallback content has been inserted.</p>
  <ol>
    <li>Change the size of the image below using the number input. If you change the number to zero, the image will be invalid and fallback content will appear.</li>
    <li>Re-add the number. The content does not refresh. This is a <a href="http://stackoverflow.com/questions/676705/changing-data-content-on-an-object-tag-in-html">known bug.</a></a></li>
    <li>However, toggling the content via if.bind does not reset the object itself (although the data should be re-bound). Is the view cached?</li>
  </ol>
  <input type="number" value.bind="size" />
  <button type="button" click.delegate="toggleShow()">Show/Hide object content</button>
  
  <div if.bind="show">
    <object data="http://placehold.it/${size}" type="image/png">
      <p>This is fallback content, but should not be shown if the URL is valid.</p>
    </object>
  </div>
 </template>
diff --git a/app.js b/app.js
 export class App {
  constructor () {
    this.show = true;
    this.size = 300;
  }
  
  toggleShow () {
    this.show = !this.show;
  }
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>
    
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
 </html>
	<template>
	<h1>Object binding inside if - view caching?</h1>
	<p>Object tags do not appear to be re-rendered inside an if binding. This means that object content does not get refreshed when the if binding changes if fallback content has been inserted.</p>
	<ol>
	<li>Change the size of the image below using the number input. If you change the number to zero, the image will be invalid and fallback content will appear.</li>
	<li>Re-add the number. The content does not refresh. This is a <a href="http://stackoverflow.com/questions/676705/changing-data-content-on-an-object-tag-in-html">known bug.</a></a></li>
	<li>However, toggling the content via if.bind does not reset the object itself (although the data should be re-bound). Is the view cached?</li>
	</ol>
	<input type="number" value.bind="size" />
	<button type="button" click.delegate="toggleShow()">Show/Hide object content</button>

	<div if.bind="show">
	<object data="http://placehold.it/${size}" type="image/png">
	<p>This is fallback content, but should not be shown if the URL is valid.</p>
	</object>
	</div>
	</template>
	export class App {
	constructor () {
	this.show = true;
	this.size = 300;
	}

	toggleShow () {
	this.show = !this.show;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>