javascript - 下划线和 Bootstrap 日期时间选择器

Question

我正在尝试让 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();
}

Answer 1

这是一种常见模式，您需要在渲染的 html 之上初始化一些第三方组件。您基本上需要做的是首先渲染 HTML，然后在适当的元素上调用第三方组件。请记住，如果您尚未将 View 的元素附加到 DOM(渲染 View 时经常出现这种情况)，您仍然可以使用 $el 遍历它的 el。查找。

例如

 render: function () {

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

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

还有一个指向 sjbin 的链接