Question

我正在尝试使用＆＃39; pickadate＆＃39;包装在MeteorJS中，但是“Pickadate”＃39;更改所有模板实例中的日期，而不仅仅是我想要的日期。

<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＆＃39;实例应该是独立的，所以我使用本地的reactiveVars。这一天＆＃39;反应变量存储日期，当日期选择器关闭时，选择器将选择器突出显示＆＃39;日期，以及＆＃39; day＆＃39;在myTemplate实例上设置为该日期。（在＆＃39; picker.on＆＃39;，＆＃39;这＆＃39;指的是选择器。）

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，其中按钮不会显示，但您可以点击日期。

问题是如何制作按钮＆＃39;日期选择器独立工作。

Answer 1

/client/app.js行：22更改为

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

问题是你使用jquery来获取pickadate实例，但是我们需要得到正确的实例，所以我们只能用http://docs.meteor.com/#/full/template_$

将jquery元素限制为当前模板实例

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

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

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

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

1 个答案: