2013-09-04 5 views
2

jQuery UI 스피너 위젯을 넉 아웃과 결합하려면 어떻게해야합니까? spinchange 이벤트가 없으므로이 answer이 더 이상 작동하지 않습니다.jQuery 스피너와 넉 아웃

<input id='spinner' data-bind='value:theValue' /> 
<span data-bind='text:theValue'></span> 

그리고 내 JS :

$(function() { 
    $('#spinner').spinner(); 

    var viewModel = { 
     theValue: ko.observable(3) 
    }; 

    ko.applyBindings(viewModel); 
}); 

당신은 jsFiddle이 함께 놀러 수 있습니다 이건 내 HTML입니다. 보시다시피 회 전자 단추를 사용하면 span 안쪽의 텍스트가 변경되지 않습니다. 키보드로 숫자를 입력 한 다음 페이지의 다른 위치에 포커스를두면 텍스트가 변경되므로 바인딩이 작동합니다.

저는 ASP.NET을 사용하고 있기 때문에이 회 전자 위젯을 WebControl에 감쌌으므로 그와 관련이있을 수 있습니다. 우리는 모든 페이지에서 녹아웃을 사용하지 않기 때문에 앞의 대답과 같은 접근 방식을 취할 수 없습니다.

하지만 jsFiddle을 작동 시키더라도 나에게 도움이 될 수도 있고 심지어 해결책 일 수도 있습니다.

답변

2

헴, 더 이상 볼 필요가 없습니다. 분명히 그 대답은 옳았습니다. 문제는 내가 믿는 ko.utils.registerEventHandler이었다.

ko.bindingHandlers.spinnerValue = { 
    init: function (element, valueAccessor) { 
     //handle the field changing 
     $(element).on('spinstop', function() { 
      var observable = valueAccessor(); 
      observable($(element).spinner("value")); 
     }); 
    }, 

    update: function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 

     current = $(element).spinner("value"); 
     if (value !== current) { 
      $(element).spinner("value", value); 
     } 
    } 
}; 

그래서 내가 jQuery를하고 on 기능을 사용 : 그것은 내가에 코드를 변경 작동합니다. spinstop 이벤트가 존재합니다 ( spinchange처럼). 코드를보고 문자열을 검색했습니다. jQuery 코드는 약간 다르다.

어쨌든이 사용자 지정 처리기는 ASP.NET WebControl에서도 작동합니다. 이전 버전의 회 전자 (이전 1.20 사용)에서는 정상적인 KO 데이터 바인딩이 작동했습니다.