Gõ ràng buộc nhấp chuột với javascript xác nhận

Question

Tôi không thể tìm ra cách tạo liên kết bấm loại trực tiếp mà không thực thi giá trịTruy cập trừ khi hộp thoại xác nhận javascript trả về true.

Nó có thể giống như thế này:

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

Bên trong, các confirmClick ràng buộc sẽ làm điều gì đó như:

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

Tôi biết tôi có thể nhận được xung quanh cần phải làm điều này bằng cách đặt mã confirm(...) trong chế độ xem Mô hình của tôi, nhưng điều đó dường như không thích hợp để đặt loại mã đó. Tôi có lẽ cũng có thể đi xa như để làm điều này loại hộp thoại xác nhận với jQueryUI hoặc Bootstrap, nhưng tôi muốn một cái gì đó tôi chỉ có thể thả vào bất kỳ dự án.

tôi đã lùng sục internets không có may mắn .. Tôi thậm chí còn nhìn vào mã nguồn cho sự kiện click loại trực tiếp của (https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/event.js), nhưng nó không giống thân thiện ở tất cả ...

Bất kỳ sự giúp đỡ nào cả sẽ được đánh giá cao!

Answer 1

Bạn cần phải tạo tùy chỉnh của bạn confirmClickbinding handler mà mất tin nhắn của bạn và nhấp chuột của bạn xử lý và quấn quanh logic xác nhận:

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); 
    } 
} 

Và bạn có thể bạn nó như bạn đã mô tả:

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

Demo JSFiddle.

Lưu ý: Bạn chỉ cần phép thuật click.apply nếu bạn muốn giữ lại và vượt qua trình xử lý sự kiện ban đầu click đối với trình xử lý sự kiện nhấp của riêng bạn.

Answer 2

Tôi tin rằng đây là nơi Knockout định nghĩa các ràng buộc handler nhấp chuột -

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); 
    } 
} 

đâu EventName được nghe tiếng 'click' cho rằng xử lý ràng buộc. Tôi tin rằng việc đưa một nơi nào đó trong mô hình quan điểm của bạn hoặc sau Knockout được tải nên làm các trick -

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/