0

Использую JsRender.

Есть 2 варианта как рендерю элементы.

Первый: когда получаю аяксом данные в json формате, я подставляю в маркеры значения.
Второй: когда просто рендерю новый элемент без данных. Так вот на этом этапе мне выдает ошибку.

Как правильно задать условие, чтобы шаблонизатор подставлял значения, когда оно есть?

<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

1 ответ 1

1

Update:
Если нужно проинициализировать шаблон без передачи данных, необходимо передать в метод render пустой объект. Вот так:

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>

Проверьте свой код на наличие опечаток или уточните вопрос.

5
  • У меня есть момент когда я не передаю в render никакой даты,в этом случае выдается ошибка что name не существуе,поэтому можно ли условие прописать если есть name подставлять!
    – quaresma89
    12 фев 2016 в 8:05
  • @quaresma89, отредактируйте вопрос и покажите пример data, на котором можно воспроизвести ошибку, а еще лучше добавьте и текст ошибки
    – VenZell
    12 фев 2016 в 8:15
  • Поправил вопрос!
    – quaresma89
    12 фев 2016 в 8:24
  • 1
    @quaresma89 совсем не передавать данные не выйдет. Нужно в метод render передать пустой объект. Посмотрите ответ
    – VenZell
    12 фев 2016 в 8:30
  • Так и думал спасибо!
    – quaresma89
    12 фев 2016 в 8:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.