Pickadate 在流星中的多个模板实例上更改日期答案

【问题标题】：Pickadate changes date on multiple template instances in meteorPickadate 在流星中的多个模板实例上更改日期
【发布时间】：2015-08-10 15:52:15
【问题描述】：

我正在尝试在 MeteorJS 中使用“pickadate”包，但“pickadate”会更改所有模板实例中的日期，而不仅仅是我想要的那个。

<body>
  <div class="outer">
    <h1 class="title">Datepicker</h1>
    {{> myTemplate}}
    {{> myTemplate}}
    {{> myTemplate}}
  </div>
</body>

<template name="myTemplate">
    <div class="ui myDay button">
        {{myDay}}
    </div>
</template>

三个“myTemplate”实例应该是独立的，所以我使用本地响应变量。 “day”反应变量存储日期，当日期选择器关闭时，选择器获取选择器的“突出显示”日期，并且 myTemplate 实例上的“天”设置为该日期。（在 'picker.on' 中，'this' 指的是选择器。）

Template.myTemplate.helpers({
  myDay: function () {
        var myDay = Template.instance().day.get();
        return moment(myDay).format('ddd YYYY-MM-DD');
  }
});

Template.myTemplate.events({
});

Template.myTemplate.onCreated(function () {
    this.day = new ReactiveVar(new Date('2015-08-02'));
});

Template.myTemplate.onRendered(function () {
  var tmplInstance = this;

  var $input = $('div.ui.myDay.button').pickadate({
          containerHidden: '#hidden-input-outlet'
    });
    var picker = $input.pickadate('picker');
    picker.on({
      close: function() {
        tmplInstance.day.set(moment(this.get('highlight').obj)._d);
      }
    });

});

但由于某种原因，新日期设置在所有三个实例上，而不仅仅是我使用pickadate的那个。

代码位于meteorpad.com，按钮不会显示，但您可以点击日期。

问题是如何让按钮的日期选择器独立工作。

【问题讨论】：

此外，pickadate 弹出窗口会在单击任何按钮时显示，只有第一个按钮的弹出窗口会更改日期，这会更改所有三个按钮的日期。

标签： jquery templates meteor datepicker instances

【解决方案1】：

/client/app.js line: 22 改为

var $input = tmplInstance.$('div.ui.myDay.button').pickadate({

问题是您使用 jquery 获取pickadate 实例但我们需要获取正确的实例，因此我们可以将 jquery 元素限制为仅使用 http://docs.meteor.com/#/full/template_$ 的当前模板实例

$() 变为 TemplateInstanceHere.$() 例如：

this.$() 或 Template.instance().$() 取决于你从哪里调用它，它只会在这个模板实例中找到元素。

这是一个工作台：http://meteorpad.com/pad/omAxqAEPPjiHRLMDw/Copy%20of%20Datepicker%20(1)

【讨论】：