Question

我在我的一个表单中使用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>
 ...

一个是实现这个目标的正确方法吗？

Answer 1

如果您希望助手具有反应性，则必须返回一个反应性数据源，例如ReactiveVar（首先需要meteor add reactive-var）。

我们需要为滑块模板分配一个反应性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>

JS

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>

JS

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

如何使模板助手反应？

1 个答案: