knockout.js를 사용하여 jQuery Mobile 범위 슬라이더를 올바르게 바인딩하고 초기화하는 방법은 무엇입니까?

Question

녹아웃으로 잘 작동하는 JQM 범위 슬라이더를 얻는 데 약간의 문제가 있습니다. 내가 인터넷에서 몇 가지 게시물을 읽어

var ViewModel = function() { 
    this.quantity = ko.observable(4); 
} 

$(document).ready(function() { 
    ko.applyBindings(new ViewModel()); 
}); 

:

<input type="range" name="quantity-slider" id="quantity-slider" min="0" max="10"> 

내가 준비 문서에 적용이 녹아웃 바인딩 샘플로 만든 : 이는 JQM 슬라이더에 대한 아주 기본적인 HTML 코드입니다 다른 사람들은 범위 슬라이더의 JQM 초기화 (예 : http://css.dzone.com/articles/knockoutjs-binding-helper 및 여기 : http://www.programico.com/1/post/2012/12/knockoutjs-jquerymobile-slider.html)와 관련된 몇 가지 문제를 발견하고 각자 자신의 사용자 정의 바인딩 구현을 사용하는 작업 솔루션을 제공합니다.

그들의

하나는, (http://www.hughanderson.com/에 의해) 다음과 같습니다

data-bind="value: quantity, slider: quantity" 

지금까지 너무 좋아. 그 후, 나는이 문제에 봉착한다.

JQM 슬라이더가 첫 페이지에 있다면, 그것은 작동한다. JQM 슬라이더가 두 번째 페이지에있을 때 더 이상 작동하지 않습니다.

나는이 particulary JQM 위젯과 DOM 조작과 관련된 문제라고 생각합니다.

1. 작동하지 : http://jsfiddle.net/5q38Q/ 슬라이더를 두 번째 JQM 페이지에
2. 작업 : http://jsfiddle.net/5q38Q/1/ 슬라이더를 처음 JQM에 더 나은 이것을 설명하기 위해, 난 그냥 두 JQM 페이지의 순서를 바꿔 두 jsFiddle을 만들었습니다 페이지

누군가 JQM 슬라이더 녹아웃 바인딩을 초기화하는 올바른 방법입니다 제발 설명해 주실 수 있습니까? 어쩌면 JQM 슬라이더에 대한 사용자 정의 바인딩을 작성하는 또 다른 방법이있을 수도 있고, 녹아웃 바인딩이 pagebeforeshow 이벤트에 삽입되어야 할 수도 있습니다.

UPDATE : 변화에 추종 는 슬라이더가 정확한 값을 표시하고, 텍스트 입력 부분도 동기화된다 : 더 나은 해결책이 없다

$(document).on('pagebeforeshow', '#slider-page', function(){  
    $('#quantity-slider').val(viewModel.quantity()); 
    $('#quantity-slider').slider('refresh'); 
}); 

하지만 IM 경이 경우.

적어도 Varun의 맞춤 바인딩과 함께, 이제는 잘 작동합니다!

Answer 1

를 (I는 입력 텍스트 상자를 표시하지 않기 때문에이 솔루션은 나를 위해 충분하다), 나는 결국 솔루션을 다음과 같이, 어쩌면 이것은 다른 사람들이 시간을 절약하는 데 도움이 :

최종 작업 바이올린 : 문제는 KN을 통합하는 방법에 대해습니다http://jsfiddle.net/CT7fy/

ockout.js와 다중 페이지 탐색 기능이있는 JQuery Mobile 슬라이더는 가장 일반적인 상황 중 하나입니다. bindinghandler 하기 Varun의 정의는 내가 작업 솔루션을 발견하지 못했을 것없이,

그래서 나는 완전하고 satisfiyng로하기 Varun의 답변을 고려할 수 없다는 미안 해요,하지만 난 말을해야합니다. 여기

는 slighlty 변성 맞춤 결합 핸들러이다

/* custom binding handler thanks to Varun http://stackoverflow.com/a/16493161/2308978 */ 
ko.bindingHandlers.slider = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var value = valueAccessor(); 
      $(document).on({ 
       "mouseup touchend keypress": function (elem) { 
       var sliderVal = $('#' + element.id).val(); 
       value(sliderVal); 
      } 
     }, ".ui-slider"); 
    } 
}; 

... 여기 페이지 초기화이다

슬라이더의 텍스트 부분은 또한 동기화

$(document).on('pagebeforeshow', '#slider-page', function(){ 
    $('#quantity-slider').val(viewModel.quantity()); 
    $('#quantity-slider').slider('refresh'); 
}); 

후 이것은 표준 슬라이더 동작이므로 입력 또는 탭으로 미리 지정하십시오.

Answer 2

같은 문제가 발생했습니다. 이것이 내가 어떻게 해결 했는가. 이 솔루션은 텍스트 입력을 사용하여 값을 직접 편집 할 때 관찰 가능을 업데이트하지 않지만,약간의 시간이 문제에 대한 웹에있는 모든 변화를 테스트하기 위해 보낸 후

http://jsfiddle.net/WMr8D/9/

$(document).ready(function() { 
var ViewModel = function() { 
    var self = this; 
    self.quantity = ko.observable(4); 
};  

ko.bindingHandlers.slider = { 
    init: function (element, valueAccessor) { 
     var value = valueAccessor(); 
     $(document).on({ 
      "mouseup touchend keypress": function (elem) { 
       value($('#' + element.id).val()); 
      } 
     }, ".c-slider"); 
    } 
};  

ko.applyBindings(new ViewModel()); 
}); 

Answer 3

사용자 정의 처리기에서 "변경"이벤트에 바인딩하는 것이 mouseup touchend 및 keypress에 바인딩하는 것보다 더 신뢰할 수 있습니다. 또한 pagebeforeshow 이벤트가 필요하지 않습니다. , http://jsfiddle.net/ZbrB7/2483/