How to initialize the JsRender template without transferring data to it?

Question

There are 2 options as render elements.

First: when I get the Ajax data in json format, I substitute values in the markers.
Second: when I just render a new item without data. So at this stage I get an error.

How correctly to set a condition that a template engine substituted values when it is?

 <script id="holidaysFormTpl" type="text/x-jsrender"> <div class="tr for-clone item active"> <div class="td parent"> <div class="wrapp-input edit"> <input type="text" class="input-val" name="name" placeholder="Christmas" value="{{if name}} {{:name}} {{/if}}"> </div> </div> <div class="td parent"> <div class="wrapp-input edit"> <input type="text" id="choose_date" name="start_date" value="{{:start_date}}" class="date-pick" placeholder="Choose date"> </div> </div> <div class="td right-align"> <a href="#" class="btn waves-effect waves-light ml-10 small save-this-row">Save it</a> </div> <div class="td right-align"> <a href="#" class="trash-ico "><span class="ico icon-trash "></span></a> </div> </div> </script>

 //GENERATE DINAMIC HOLIDAYS BLOCK $('.add-hol').click(function(){ var holidaysForm = $('#holidaysFormTpl').render(); $(this).parents('.parent-form').find('.display-table .tbody').append(holidaysForm); initializeDtepicker2(); }); //GET HOLIDAYS $('#dep-box').on('click', '.show-holidays', function(){ var btn = $(this); var id = btn.parents('form').data('dep-id'); $.ajax({ url : '/settings/get_holidays', method: 'POST', dataType: 'json', data: { id : id }, success: function(data){ var holidaysForm = $('#holidaysFormTpl').render(data); $('.holidays-box .display-table .tbody').append(holidaysForm); initializeDtepicker2(); } }); });

Uncaught TypeError: Cannot read property 'name' of undefined

Accepted Answer · 2016-02-12T07:51:28

Update:
If you need to initialize the template without transferring data, you must pass an empty object to the render method. Like this:

 var template = $.templates("#holidaysFormTpl"); var htmlOutput = template.render({}); $("#result").html(htmlOutput);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.72/jsrender.min.js"></script> <script id="holidaysFormTpl" type="text/x-jsrender"> <div class="tr for-clone item active"> <div class="td parent"> <div class="wrapp-input edit"> <input type="text" class="input-val" name="name" placeholder="Christmas" value="{{if name}} {{:name}} {{/if}}"> </div> </div> <div class="td parent"> <div class="wrapp-input edit"> <input type="text" id="choose_date" name="start_date" value="{{:start_date}}" class="date-pick" placeholder="Choose date"> </div> </div> <div class="td right-align"> <a href="#" class="btn waves-effect waves-light ml-10 small save-this-row">Save it</a> </div> <div class="td right-align"> <a href="#" class="trash-ico "><span class="ico icon-trash "></span></a> </div> </div> </script> <div id="result"></div>

Check your code for typos or clarify a question.

I have a moment when I don’t give any date to render, in this case an error is issued that the name doesn’t exist, so is it possible to write a condition if there is a name!
@ quaresma89, edit the question and show an example of data on which to reproduce the error, or even better add the error text
It is necessary to pass an empty object to the render method.

How to initialize the JsRender template without transferring data to it?

1 answer 1

More articles: