Подчеркивание и загрузка datetimepicker

Я пытаюсь заставить bootstrap datetimepicker работать с https://github.com/Eonasdan/bootstrap-datetimepicker в моем веб-приложении. Из-за того, что я использую шаблоны, у меня нет тегов сценария, необходимых для инициализации средства выбора даты и времени внутри тегов сценария шаблона.

         $("#datetimepicker1").datetimepicker(); //where should this go
         <script type="text/template" id="manage-todos-template">
         <div id="user-info">
         Signed in as <%= Parse.User.current().get("username") %> (<a href="#"       class="log-out">Log out</a>)
         </div>
         <br>
         <div>
         <textarea name="styled-textarea" maxlength="50" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">Enter promo here    </textarea>
         </div> 
         <div class="container">
         <div class="row">
         <div class='col-sm-6'>
         <div class="form-group">
         <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon"><span class="glyphicon glyphicon-calendar">     </span>
          </span>
         </div>
         </div>
         </div>
          <button href="#" class="submitPromo">Submit</button>
          </script>


  //render

  render: function() {
            $('#datetimepicker1').datetimepicker();
}

javascript datetimepicker twitter-bootstrap backbone.js underscore.js
person user3607131    schedule 06.05.2014    source источник
comment
Я предполагаю, что вы визуализируете свой шаблон с некоторым представлением, инициализируйте средство выбора даты в своем методе рендеринга после рендеринга шаблона.   -  person Jack    schedule 06.05.2014
comment
Я пробовал это, но получаю Uncaught TypeError: undefined не является функцией   -  person user3607131    schedule 06.05.2014
comment
Где? Было бы полезно, если бы вы включили код рендеринга, а еще лучше jsbin или jsfiddle.   -  person Jack    schedule 06.05.2014
comment
Я отредактировал свой пост с помощью функции рендеринга для шаблона manage-todos-template.   -  person user3607131    schedule 07.05.2014
comment
Где вы рендерите свой html? это часть другого взгляда?   -  person Jack    schedule 07.05.2014
comment
Да, это часть другого взгляда.   -  person user3607131    schedule 08.05.2014
comment
Похоже, что скрипт еще не загружен, можете ли вы создать jsbin или jsfiddle, иллюстрирующий вашу проблему?   -  person Jack    schedule 08.05.2014
comment
Могу ли я загружать файлы, например datetimepicker.js? Или еще как я могу воспроизвести проблему?   -  person user3607131    schedule 08.05.2014
comment
У вас должна быть ссылка на файл в GitHub, а остальные скрипты вы можете посмотреть на cdnjs.com.   -  person Jack    schedule 08.05.2014
comment
На cdnjs тоже вроде есть bootstrap-datepicker, но я не уверен, тот же это или нет.   -  person Jack    schedule 08.05.2014
comment
Я не смог связать... но здесь вы можете увидеть мой код   -  person user3607131    schedule 08.05.2014
comment
Похоже, вы пропустили соответствующие части своей скрипки (я не вижу там ничего с идентификатором вашего таймпикера... Во всяком случае, вот jsbin, который показывает, как отобразить шаблон, а затем инициализировать на нем средство выбора даты и времени.   -  person Jack    schedule 08.05.2014
comment
Большое спасибо!! Я просто не нашел правильно средство выбора даты и времени, this.$el.find('#datetimepicker1').datetimepicker();   -  person user3607131    schedule 08.05.2014
comment
Могу ли я как-то дать вам баллы? Извините, я новичок в стеке   -  person user3607131    schedule 08.05.2014
comment
Причина, по которой вы не смогли его найти, вероятно, в том, что на тот момент он еще не был присоединен к DOM. Я напишу свои комментарии в качестве ответа.   -  person Jack    schedule 08.05.2014
comment
Да, теперь так много смысла. Я думал, что, поскольку я визуализировал html, содержащий средство выбора даты и времени, мне не нужно было его прикреплять   -  person user3607131    schedule 08.05.2014

Ответы (1)


arrow_upward
1
arrow_downward

Это распространенный шаблон, когда вам нужно инициализировать какой-то компонент третьей части поверх отображаемого html. Что вам в основном нужно сделать, так это сначала отобразить ваш HTML, а затем вызвать сторонний компонент для соответствующего элемента. Имейте в виду, что если вы еще не прикрепили элемент вашего представления к DOM (как это часто бывает при рендеринге представления), вы все равно можете пройти по нему el с помощью $el.find.

Например

 render: function () {

    var template = _.template($('#mytemplate').html());

    this.$el.html(template);
    this.$el.find('#datetimepicker1').datetimepicker();
    return this;
  }

И ссылку на sjbin.

person Jack    schedule 08.05.2014