underscore template with dynamic DTO
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?
oop design-patterns backbone.js underscore.js
add a comment |
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?
oop design-patterns backbone.js underscore.js
add a comment |
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?
oop design-patterns backbone.js underscore.js
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?
oop design-patterns backbone.js underscore.js
oop design-patterns backbone.js underscore.js
asked Jan 2 at 8:49
sadrzadehsinasadrzadehsina
670816
670816
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003464%2funderscore-template-with-dynamic-dto%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
add a comment |
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.
add a comment |
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.
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.
answered Jan 2 at 10:50
T JT J
32.8k957112
32.8k957112
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003464%2funderscore-template-with-dynamic-dto%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown