템플릿 헬퍼를 반응시키는 방법?

Question

내 양식 중 하나에서 JQueryUI 슬라이더를 사용하여 범위 내의 값을 선택합니다. 나는 반응 슬라이더 방법

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> 
... 

한이 작업을 수행하는 올바른 방법은의 getter 메소드를 만들 필요가 의미 슬라이더 옆에이 값을 표시하려면?

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 패키지로 포장하여 패키지로 게시 할 수도 있습니다.

재사용이 유성 성분은 다음과 같이 사용될 수

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); 
    } 
}); 

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 :

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(); 
    } 
});