유성 반응 클라이언트 코드 : 코드 작성의 최선/올바른 방법을 묻습니다.

Question

클라이언트 코드 예제를 찾으십시오. 수동 드래그 또는 메시지 스트림별로 서버에서 새로운 값을 가져 와서 값을 변경할 수있는 jQuery 간단한 슬라이더 처리.

Template.SLIDER.rendered 이벤트에서 div 요소에 jQuery UI 슬라이더를 만듭니다. 내가에 가입

(스트림 통지에 의해 여기) 서버에서 이벤트에 의해도 슬라이더 값을 업데이트해야하기 때문에

나는, 내가 이런 짓을

var에 Div_Slider에서 DIV 요소에 대한 참조 var에 저장 반응하는 세션 변수 "slider_value"Deps.autorun().

Session.set이 호출 될 때이 요소가 이미 렌더링 된 경우 이벤트도 Slider.value를 업데이트해야합니다.

대신 $ ('# servo-slide')를 사용하십시오. 두 번 이상 DOM을 반복적으로 검사해야합니다.이 로컬 Div_Slider var를 참조로 준비하고 jQuery UI Slider와의 상호 작용 중에 사용합니다.

Q : 이것이 최고의 성능 기술입니까? - 로컬 .js 파일 범위 만들기 vars가 일반적으로 사용되는 요소를 참조합니까?

Q : 샘플 코드에 대한 제안 사항이 있으십니까? 나에게서 또 다른 질문에 Nathans 주석과 대답을 사용

    { ... } 

    /* 
     --------------- Slider 
    */ 

    // save reference to slider 
    var Div_Slider = undefined; 

    // be reactive on Session value slider_value 
    Deps.autorun(function() { 
     // we just operate when available 
     if (Session.equals('slider_value', undefined)) 
     return; 
     // be reactive on slider_value 
     var slider_value = Session.get('slider_value'); 
     // set jQuery slider position 
     if (!_.isUndefined(Div_Slider)) { 
     Servo_Slider.slider({value: slider_value}); 
     } 
    }); 

    // listen to the stream 
    notifications.on('change_slider_value', function(new_value) { 
     // we are updating the sliders value, this will also update the Session value in onChange event 
     Session.set("slider_value", new_value); 
    }); 

    Template.SLIDER.rendered = function() { 
     // save reference to elements 
     Div_Slider = $(this.find('#servo-slide')); 

     // update div as slider 
     Servo_Slider.slider({ 
     min: 0, 
     max: 100, 
     step: 1, 
     range: "min", 
     value: Session.get("slider_value"), 
     change: 
      function(event, ui) { 
      // only do something if the event was generated here 
      if (event.originalEvent) { 
       // do your actions 
      } 
      } 
     }); 
    } 

    { ... } 

Answer 1

, 나는 코드를 최적화 jQuery를 슬라이더에 대한 유성 코드를 작성하는 가장보고하는 바이다.

---

    // listen to the stream 
    notifications.on('change_slider_value', function(new_value) { 
     // we are updating the sliders value, this will also update the Session value in onChange event 
     Session.set("slider_value", new_value); 
    }); 

    Template.SLIDER.rendered = function() { 
     // save reference to elements 
     var slider = $(this.find('#servo-slide')); 

     // update div as slider 
     slider.slider({ 
     min: 0, 
     max: 100, 
     step: 1, 
     range: "min", 
     value: Session.get("slider_value"), 
     change: 
      function(event, ui) { 
      // only do something if the event was generated here 
      if (event.originalEvent) { 
       // do your actions 
      } 
      } 
     }); 

     // be reactive on Session value slider_value 
     this.computation = Deps.autorun(function() { 
     // set jQuery slider position 
     slider.slider({value: Session.get('slider_value')}); 
     }); 
    } 

    Template.SLIDER.destroyed = function() { 
     // check if we added a computation and stop 
     if (this.computation) 
     this.computation.stop(); 
    }