문제

나는 항상 사용했습니다 수확이 선택한 드롭 다운 호출 된 일부 JS가 <select> 안건. 이제 녹아웃으로 선택 목록을 렌더링하고 있습니다.

선택한 드롭 다운에서 표준 드롭 다운을 변환하는 데 사용되는 코드입니다.

$(dropdownSelectorOrElement).Chosen()

내가 알 필요가 언제 녹아웃은 렌더링을 마쳤다 <select>, 위의 코드를 호출하려면 : 아마도 콜백 함수는 <select> 선택기를 사용하지 않고 통과 할 수 있도록 그 자체로.

녹아웃이 노출됩니다 optionsAfterRender 콜백 (문서화 여기: "참고 2"참조) : 그러나 : :

  • optionsAfterRender 옵션이 렌더링 될 때마다 호출됩니다

  • optionsAfterRender 옵션 요소에 대한 참조 만 제공합니다

정확히 같은 것이 필요합니다 optionsAfterRender 그러나 전체가있을 때만 호출됩니다 <select> 렌더링을 마쳤습니다. 녹아웃에는 이와 같은 것이 있습니까?

나는 준비했다 jsfiddle 설명합니다 optionsAfterRender.

도움이 되었습니까?

해결책

이 사용자 지정 바인딩으로 해결했습니다 이 질문.

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {

        $(element).chosen();
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = ko.unwrap(valueAccessor()); // - see comment
        $(element).trigger("liszt:updated");
    }
};

사용하지 않는 경우에 유의하십시오 ko.unwrap, 나에게 들었던 것처럼 업데이트 기능은 발사되지 않습니다. 이것 이 문제와 관련된 질문.

다른 팁

또한 애프터 렌더 바인딩을 만들 수 있습니다.

ko.bindingHandlers.afterRender = {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        allBindings.get('afterRender').call(viewModel, element);
    }
};

이 견해로 :

<select data-bind="
options: Options,
value: selection,
optionsText: 'text',
optionsValue: 'value',
afterRender: renderCallback
"></select>
<span data-bind="text: selection"></span>

그리고이보기 모델 :

function viewModel() {

    this.renderCallback = function (selectElement) {
        console.log('call');
    };

    this.Options = [{
        text: "abee",
        value: "123"
    } ...
};

바이올린을 참조하십시오

도움이되기를 바랍니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top