underscore template with dynamic DTO












1















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?










share|improve this question



























    1















    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?










    share|improve this question

























      1












      1








      1








      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?










      share|improve this 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?







      oop design-patterns backbone.js underscore.js






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Jan 2 at 8:49









      sadrzadehsinasadrzadehsina

      670816




      670816
























          1 Answer
          1






          active

          oldest

          votes


















          3














          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.






          share|improve this answer























            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
            });


            }
            });














            draft saved

            draft discarded


















            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









            3














            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.






            share|improve this answer




























              3














              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.






              share|improve this answer


























                3












                3








                3







                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.






                share|improve this answer













                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.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Jan 2 at 10:50









                T JT J

                32.8k957112




                32.8k957112
































                    draft saved

                    draft discarded




















































                    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.




                    draft saved


                    draft discarded














                    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





















































                    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







                    Popular posts from this blog

                    Mossoró

                    Error while reading .h5 file using the rhdf5 package in R

                    Pushsharp Apns notification error: 'InvalidToken'