underscore template with dynamic DTO - oop

Question

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?

Answer 1

Marionette has a serializeData method that acts as a layer between the template and data model.
If you change anything in the data model or in template, you can make corresponding adjustments in serializeData instead of updating both places.
Similarly if you don't want the changes to your data model affect the template, you can create a layer between them.
For example if you change
export const getDTO => [
{ 'title': 'title one', 'body': 'sample paragraph one' },
{ 'title': 'title two', 'body': 'sample paragraph two' },
]
to
export const getDTO => [
{ 'heading': 'title one', 'body': 'sample paragraph one' },
{ 'heading': 'title two', 'body': 'sample paragraph two' },
]
You update your layer from
serializeData(dto){
return dto;
}
to
serializeData(dto){
return {
title: dto.heading
}
}
hence your template remain unaffected.