Pickadate 更改流星中多个模板实例的日期

Question

我正在尝试在 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' 实例应该是独立的，所以我使用本地 reactiveVars。 'day' 反应变量存储日期，当日期选择器关闭时，选择器采用选择器的 'highlighted' 日期，并且 myTemplate 实例上的 'day' 设置为该日期。（在'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 上，按钮不会显示，但您可以点击日期。

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

Answer 1

/client/app.js行：22改为

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

问题是您使用 jquery 来获取 pickadate 实例，但我们需要获取正确的实例，因此我们可以使用 [=12= 将我们的 jquery 元素限制为当前模板实例]

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

this.$() 或 Template.instance().$() 取决于您从哪里调用它，它将仅在此模板实例中找到元素。

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

Pickadate 更改流星中多个模板实例的日期

Pickadate changes date on multiple template instances in meteor

jquery

templates

meteor

datepicker

instances