design-patterns: underscore template with dynamic DTO

mercredi 2 janvier 2019

I am looking for a pattern in which I can create various templates based on a model. Imagine I have below getDTO function.

export const getDTO => [
  { 'title': 'title one', 'body': 'sample paragraph one' },
  { 'title': 'title two', 'body': 'sample paragraph two' },
]

I am using following underscore template in order to render the DTO.

<script type="text/template">
  <h1><%= title %></h1>
  <p><%= body %></p>
</script>

It works fine until I keep the DTO the same. If I change my DTO by any purpose, it breaks rendering the template.

Now the question is, is there any pattern for making sure the template is always reflect the changes in my DTO?

design-patterns