JSFiddle - React, Tailwind, and code Playground

by 76484

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
<script id="Template" type="text/template">
	var viewMarkers = [
		{{#each viewModel}}
			{
				location: '{{location}}',
        lat: {{lat}},
        lng: {{lng}}
      }
      {{#unless @last}},{{/unless}}
    {{/each}}
  ];

  var viewMarkers2 = {{{viewModel2}}};

	console.log('viewMarkers:', viewMarkers);
  console.log('viewMarkers2:', viewMarkers2);
</script>

JavaScript

// https://stackoverflow.com/q/48046510/3397771

var raw = document.getElementById('Template').innerHTML;
var template = Handlebars.compile(raw);
var locations = [
  {
    location: 'Fo"o',
    lat: 1,
    lng: 2
  },
  {
    location: 'Bar',
    lat: 4,
    lng: 8
  }
];

var data = {
	viewModel: locations,
  viewModel2: JSON.stringify(locations)
};

var $script = document.createElement('script');
$script.append(template(data));
document.body.append($script);