Question

我在我的代码中使用了陨石插件 pickadate （一个打包的jQuery插件），我在处理会话，重新渲染和显示日历时遇到了麻烦。

我有一个名为 datepicker 的模板，它显示两个表格，用于显示用于以dd / mm / yyyy格式显示日期的输入框，还有一个日历显示区域，用于更直观地显示日期令人满意的格式。

<template name="datePicker">
  <div class="dates">
    <table class="dateTable">
      <thead>
        <tr>
          <th><span class="checkDate"><input type="text" id="checkIn" name="checkIn" value="" placeholder="Check In"></span></th>
          <th><span class="checkDate"><input type="text" id="checkOut" name="checkOut" value="" placeholder="Check Out"></span></th>
        </tr>
      </thead>
      <tbody class="dateTableBody">
        <tr>
          <td id="startDate">
            <span class="dayNum">{{startDateDayNum}}</span>
            <div class="monthYear">
              <span class="month">{{startDateMonth}}</span>
              <span class="year">{{startDateYear}}</span>
            </div>
            <span class="day">{{startDateDayName}}</span>
          </td>
          <td id="endDate">
            <span class="dayNum">{{endDateDayNum}}</span>
            <div class="monthYear">
              <span class="month">{{endDateMonth}}</span>
              <span class="year">{{endDateYear}}</span>
            </div>
            <span class="day">{{endDate}}</span>
          </td>
        </tr>
      </tbody>
    </table>

    <p class="welcomeRewards"><span class="wr">Welcome Rewards</span> <span class="nights">Collect <strong><b>1</b> nights</strong></span></p>
  </div>
</template>

我使用帮助器根据存储的Session变量设置开始和结束日期值，例如：

Template.datePicker.startDateYear = function() {
  return Session.get('startDate').year;
}

当前点击 checkIn 输入框应显示pickadate日历，当选择日期时，这会更新我的startDate会话并填充日历显示。

我现在想要的是打开 checkOut 日历，但因为页面已经重新呈现，如果页面上没有显示。

这是我呈现的方法，显示了我如何实例化日历。

Template.datePicker.rendered = function() {
  var template = this;

  var checkOut = $('#checkOut').pickadate({
    weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    format: 'dd/mm/yyyy',
    today: '',
    clear: '',

    onClose: function(e) {
      Session.set('openEndDate', false);
      setDates(this, true);
      getNights(checkInPicker, this);
    }
  });
  var checkOutPicker = $('#checkOut').pickadate('picker');

  var checkIn = $('#checkIn').pickadate({
    weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    format: 'dd/mm/yyyy',
    min: true,
    today: '',
    clear: '',

    onClose: function(e) {
      var year = this.get('select').year,
          month = this.get('select').month,
          date = this.get('select').date;

      if (this.get()) {
        checkOutPicker.set({
          'min': [year,month,date+1],
          'max': [year,month,date+28]
        });

        setDates(this);

        Session.set('openEndDate', true);
      };
    }
  });

  var checkInPicker = $('#checkIn').pickadate('picker');

  this.tCheckIn = checkInPicker;
  this.tCheckOut = checkOutPicker;

  if(Session.get('openEndDate')) {
    this.tCheckOut.open();
  }
}

实现这项工作的流星方式是什么？

Answer 1

尝试运行meteor：

meteor --release template-engine-preview-10.1

或者做：

meteor update --release template-engine-preview-10.1
meteor

这将使用新模板引擎的最新预览版本，它对反应性渲染HTML进行了更细粒度的控制，允许您正常使用大多数jQuery插件。新的模板引擎最终会在Meteor 1.0之前合并到流星核心版本中，此时你可以做到：

meteor update
meteor

请注意，新引擎不需要（并且不支持）{{#constant}}，{{#isolate}}或preserve，因此如果您有任何需要删除它们。< / p>

处理重新渲染和事件

1 个答案: