Ractive Removces White Space in HTML

by Christian Meixner

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/ractive.js"></script>

<div id="demo"></div>

<script id="tmpl" type="text/template">

<h2>Space expected between SPANs:</h2>
<div>
		{{#each words}}
    <span>{{.}}</span>
		{{/each}}
</div>

<div>
		{{#each words}}
    <span> {{.}} </span>
		{{/each}}
</div>

<div>
		{{#each words}}
    {{.}}
		{{/each}}
</div>

<div>
		{{#each words}}
    {{.}} {{!#bugfix}}
		{{/each}}
</div>

<div>
    <span>{{words.0}}</span>
    <span>{{words.1}}</span>
    <span>{{words.2}}</span>
    <span>{{words.3}}</span>
    <span>{{words.4}}</span>
    <span>{{words.5}}</span>
</div>

<h2>No Spaces expected here:</h2>
<div>{{#each words}}<span>{{.}}</span>{{/each}}</div>
</script>

CSS

body {font-family:helvetica; font-size:12px}

div div {color: #700;}

h2 {margin-bottom:5px;}

JavaScript

Ractive.WELCOME_MESSAGE = false;
console.log(Ractive.VERSION);

const app = new Ractive({
  el: '#demo',
  template: '#tmpl',
  data: {
  	words: ['There','Should','Be','Space','Between','Words']
   }
});