如何使模板助手反应？答案

【问题标题】：How to make template helper reactive?如何使模板助手反应？
【发布时间】：2015-01-26 01:46:22
【问题描述】：

我在我的一个表单中使用 JQueryUI 滑块来选择一个范围内的值。我想在滑块旁边显示这个值，这意味着我需要让滑块方法的 getter 方法反应

Template.payments.rendered = function () {
  $( "#requestAmount" ).slider({
     min: 10,
     max: 50,
     step: 1,
   });
};


Template.payments.helpers({

  requestAmount: function() {
    var value = $( "#requestAmount" ).slider( "option", "value" );
    return value;
  },
  ....

HTML

 <form class="navbar-form navbar-left">

 <div id="requestAmount"></div>
    <div class="requestAmount">
      {{requestAmount}}
    </div>
 ...

实现这一点的正确方法是什么？

【问题讨论】：

标签： meteor

【解决方案1】：

如果你希望你的助手是响应式的，它必须返回一个响应式数据源，例如ReactiveVar（你需要先meteor add reactive-var）。

我们需要像这样为滑块模板分配一个反应变量：

Template.payments.created=function(){
  this.sliderValue=new ReactiveVar(0);
};

然后我们可以在我们的帮助器中返回这个响应式数据源的值

Template.payments.helpers({
  sliderValue:function(){
    Template.instance().sliderValue.get();
  }
});

最后，我们必须在滑块改变时设置响应变量值。

Template.payments.events({
  "slidechange #requestAmount":function(event,template){
    var sliderValue=template.$("#requestAmount").slider("option","value");
    template.sliderValue.set(sliderValue);
  }
});

您可能希望将所有这些包装在一个可重复使用的 Meteor 包中，甚至将其作为一个包发布。

HTML

<template name="UISlider">
  <div id="{{id}}" class="ui-slider">
    <div class="ui-slider-widget"></div>
    <div class="ui-slider-value">{{value}}</div>
  </div>
</template>

Template.UISlider.created=function(){
  this.value=new ReactiveVar(0);
};

Template.UISlider.helpers({
  value:function(){
    return Template.instance().value.get();
  }
});

Template.UISlider.events({
  "slidechange":function(event,template){
    var value=template.$(".ui-slider-widget").slider("option","value");
    template.value.set(value);
  }
});

这个可重复使用的 Meteor 组件可以这样使用：

HTML

<template name="payments">
  {{> UISlider id="requestAmount"}}
  <p>{{sliderValue}}</p>
</template>

Template.payments.helpers({
  sliderValue:function(){
    var $slider=Template.instance().$("#requestAmount");
    var sliderInstance=Blaze.getView($slider.get(0));
    return sliderInstance.value.get();
  }
});

【讨论】：

你确定可以在Template.templateName.events 中捕获 jQuery UI 事件吗？
您可以使用 Meteor 事件映射捕获任何 HTML5 DOM 事件，并且通常这样做更好，因为它与 Blaze 配合得很好，特别是当模板被破坏时，事件将自动取消监听。