meteor - 如何获取特殊组件(bootstrap-daterangepicker)的表单值？

Question

我正在使用 bootstrap-daterangepicker在一个表格中。我目前获取此选择的值的方式有效，但我获取值的方式似乎不是一个好方法。

使用 session 来保存字段选择并在我完成后取消设置它们似乎很糟糕。我只是想确定我没有遗漏任何东西。

我可以从输入字段中获取值，但我必须解析字符串才能提取日期。添加这可能是一个令人头疼的维护问题，因为如果我更改 daterangepicker 日期格式，我将需要更改解析。

表单域:

    <input type="text" name="carpool_eventDates" id="carpool_eventDates" />

JS激活组件:

    Template.add_event.rendered = function () {
      // initialize add event modal;
      $('#addEvent')
       .modal();
      // initialize the date range picker
      $('input[name="carpool_eventDates"]').daterangepicker(
        // default date range options
        {ranges: {'Last 5 Days': [Date.today().add({ days: -4 }), 'today'],
              'Next 5 Days': ['today', Date.today().add({ days: 4 })]}
        },
        // grab the selection
        function(start, end) {
          Session.set("showAddEventDialogue_dateRangeStart",start);
          Session.set("showAddEventDialogue_dateRangeEnd",end);
        });
      };

JS 保存按钮点击处理程序:

    Template.add_event.events({
        'click button.save-addEventDialogue': function(e, tmpl) {

          // Get the date range selection from the session
          var start = Session.get("showAddEventDialogue_dateRangeStart");
          var end = Session.get("showAddEventDialogue_dateRangeEnd");

          // Do something with the dates

          // Clear the dates from the session now that we are done with them
          Session.set("showAddEventDialogue_dateRangeStart","");
          Session.set("showAddEventDialogue_dateRangeEnd","");

          // Close the dialogue
          Session.set("showAddEventDialogue", false);
        }             
      });

这是执行此操作的好方法吗？或者有更好的方法吗？

谢谢。

Answer 1

您可以使用 jQuery 的 .data()将 daterangepicker 数据存储在原始 <input> 上元素，而不是在 session 中。所以你可以重写你的“抓取选择”代码:

// grab the selection
function(start, end) {
  $('input[name="carpool_eventDates"]')
    .data("showAddEventDialogue_dateRangeStart", start)
    .data("showAddEventDialogue_dateRangeEnd", end);
});

然后您从元素而不是 session 中检索数据:

// Get the date range selection from the element
var start = $('input[name="carpool_eventDates"]').data("showAddEventDialogue_dateRangeStart");
var end = $('input[name="carpool_eventDates"]').data("showAddEventDialogue_dateRangeEnd");

假设 <input>当模态关闭并且模板被销毁时被丢弃，您没有 Session 或其他变量需要清理。