javascript - 팝업 - 넉 아웃 자바 스크립트로 클릭 바인딩 확인




팝업 타이틀 바꾸기 (2)

Knockout이 클릭 바인딩 처리기를 정의하는 곳이라고 생각합니다.

ko.bindingHandlers[eventName] = {
    'init': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var newValueAccessor = function () {
            var result = {};
            result[eventName] = valueAccessor();
            return result;
        };
        return ko.bindingHandlers['event']['init'].call(this, element, newValueAccessor, allBindings, viewModel, bindingContext);
    }
}

여기서 eventName은 해당 바인딩 핸들러에 대해 '클릭'합니다. 나는 이것을 당신의 뷰 모델 어딘가에 두거나 Knockout이로드 된 후에 트릭을해야한다고 믿는다.

ko.bindingHandlers.clickConfirm = {
    'init': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var newValueAccessor = function () {
            var result = {};
            result.click = function () {
             var result = confirm('You are about to confirm something.');
                // If they press OK,
                console.log('pressed - ', result);
                if (result === true) {
                    console.log('Calling this - ', valueAccessor());
                    valueAccessor()();
                }

            }
            return result;
        };
        return ko.bindingHandlers['event']['init'].call(this, element, newValueAccessor, allBindings, viewModel, bindingContext);
    }
}

http://jsfiddle.net/XhLKD/

javascript 확인 ​​대화 상자가 true를 반환하지 않는 한 valueAccessor를 실행하지 않는 녹아웃 클릭 바인딩을 만드는 방법을 알 수 없습니다.

아마도 다음과 같이 보일 것입니다.

<a data-bind="confirmClick: { message: 'Are you sure?', click: someMethod }">Confirmable link</a>

내부적으로 confirmClick 바인딩은 다음과 같은 작업을 수행합니다.

if (confirm(message)) {
   click();
}

confirm(...) 코드를 내 viewModel에 넣음으로써이 작업을 수행해야 할 수 있다는 것을 알았지 만, 그런 종류의 코드를 배치하는 적절한 장소처럼 보이지 않습니다. 아마 jQueryUI 나 Bootstrap을 사용하여 이런 종류의 확인 대화를 수행 할 수도 있지만, 나는 어떤 프로젝트 에라도 들어가기를 원한다.

난 행운을 가지고 인터넷을 샅샅이 뒤 졌어. 나는 심지어 녹아웃의 클릭 이벤트 ( https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/event.js )에 대한 소스 코드를 보았다. 그러나 그것은 전혀 우호적이지 않습니다 ...

어떤 도움이라도 대단히 감사하겠습니다!


메시지와 클릭 핸들러를 가져 와서 확인 로직을 둘러싼 사용자 정의 confirmClick 바인딩 핸들러 를 만들어야합니다.

ko.bindingHandlers.confirmClick = {
    init: function(element, valueAccessor, allBindings, viewModel) {
        var value = valueAccessor();
        var message = ko.unwrap(value.message);
        var click = value.click;
        ko.applyBindingsToNode(element, { click: function () {
            if (confirm(message))
                return click.apply(this, Array.prototype.slice.apply(arguments));
        }}, viewModel);
    }
}

그리고 당신은 당신이 묘사 한 것처럼 그것을 할 수 있습니다 :

<a data-bind="confirmClick: { message: 'Are you sure?', click: someMethod }">
    Confirmable link</a>

데모 JSFiddle .

참고 : 원 click 이벤트 핸들러 args를 보존하고 자신의 클릭 이벤트 핸들러로 전달하려는 경우 click.apply 마법 만 있으면됩니다.





confirm