Question

我正在尝试在我的项目中使用jquery datepicker，但我希望在用户处于编辑模式时显示它。当我在没有if语句的情况下使用它时，它工作得很完美，但是当我输入if语句时，它不会呈现。我该如何解决这个问题？

这是我模板的一部分

   {{#if editing_duedate}}
        <input class="datepicker"  name="date">
    {{else}}
        <div class="row text-center">
                <div class="eventduedate">
                     {{duedate}}
                </div>
        </div>
    {{/if}}

这是我渲染datepicker的地方

Template.assignmenttodositem.rendered = function() {
$('.datepicker').datepicker();    
 };

这是我的模板活动

Template.assignmenttodositem.events({

......
'dblclick .eventduedate':function(evt,tmpl){
    evt.preventDefault();
    Session.set('editingduedate', this._id);
}
..........

这是我检查语句

的地方

Template.assignmenttodositem.editing_duedate = function () {
    return Session.equals('editingduedate', this._id);
 };

Answer 1

呈现模板时，

Rendered仅执行一次。在那段时间else部分没有放到HTML中，因此无法找到.datepicker。您需要检查editinduedate变量是否已更新，然后创建datePicker组件。

Template.assignmenttodositem.rendered = function() {
   var self = this;
   this.autorun(function(){
     if(Session.equals("editingduedate", self.data._id )){
       $('.datepicker').datepicker();    
     }
   })
 };

Answer 2

HTML

<template name="assignmenttodositem">
  {{#if editing_duedate}}
    {{> datepicker}}
  {{else}}
    ...
  {{/if}}
</template>

<template name="datepicker">
  <input class="datepicker"  name="date">
</template>

JS

Template.datepicker.rendered=function(){
  this.$('.datepicker').datepicker();
};

当您的模板实例插入DOM时，rendered回调只执行一次：触发包含datepicker语句的封闭模板中的#if初始化不起作用，因为当它被执行时，我们处于else状态，所以输入还没有。

要简单地解决这个问题，只需将日期选择器移动到自己的模板中（无论何时，无论如何，这一直被认为是一个很好的设计模式，只需要在较小的更容易解决的任务中分解你的主要任务），这样就会渲染它回调将在适当的时候执行。

Answer 3

将datepicker放入自己的模板中。然后在template.datepicker.rendered中初始化datepicker。如果您忘记了'this'上下文，它将无效。确保您的template.datepicker.rendered包含以下内容

this.$('#datepicker').datepicker();

其中#datepiker引用html中datepicker的id ='datepicker'。

Meteor.js中的Jquery日期选择器

3 个答案: