Получение проверки KnockoutJS с помощью Bootstrap Popover

Question

Практически там просто нужно, чтобы popover появлялся только после нажатия кнопки отправки, и в поле добавлен класс предупреждения.

Примечание: Hover работает только для IsValid истинно в связующем обработчике, в противном случае тестирования для не так требует щелчка, а не зависания: S

http://jsfiddle.net/hotdiggity/UUb4M/

HTML:

<input data-bind="value: lastName, popover: isValidField" data-placement="below" data-title="Alert" data-content="We have identified this information is incorrect and must be updated."/> 

JS:

self.lastName = ko.observable().extend({ required: true }); 
self.isValidField = ko.observable(); 
this.submit = function() { 
    if (self.errors().length === 0) { 
     alert('Thank you.'); 
    } else { 
     self.errors.showAllMessages(); 
     self.isValidField(self.lastName.isValid()); 
    } 
}; 

Переплет:

ko.bindingHandlers.popover = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var value = valueAccessor(), 
      valueUnwrap = ko.unwrap(value), 
      allBindings = allBindingsAccessor(), 
      isValid = allBindings.value; 
     if (isValid) { 
      $(element).popover({ 
       trigger: "hover" 
      }); 
     } else { 
      $(element).popover("hide"); 
     } 
    }, 
    Update: //See jsfiddle link above (the same code) 

Answer 1

Вот рабочая версия для вас. Попыток появится только в том случае, если проверка для поля lastName не выполняется и только при нажатии кнопки отправки. Он исчезнет, ​​если пользователь введет что-то в поле lastName. Смотрите это updated fiddle

update функция связывания обработчика создает зависимости от наблюдаемых, он обращается, так по существу update обязывающего обработчика будет срабатывать при том, что наблюдаемая изменяется. В вашем случае я сделал это с наблюдаемым isValidField. См. Примечания в коде

var viewModel = function() { 
    var self = this; 
    self.lastName = ko.observable().extend({ required: true }); 
    self.isValidField = ko.observable(); 

    // once the popover is shown, we want it to go away if the user types something 
    // into the lastName field. We do this by triggering the popover binding handler 
    // by changing the value of isValidField 
    self.lastName.subscribe(function(val){   
     if(val && val.length > 0){ self.isValidField(true); } 
    }); 

    // need to create your errors object 
    self.errors = ko.validation.group(self); 

    this.submit = function() { 
     if (self.errors().length === 0) { 
      alert('Thank you.'); 
     } else { 
      self.errors.showAllMessages(); 

      // change the value of isValidField to trigger the popover binding handler's 
      // update 
      self.isValidField(self.lastName.isValid()); 
     }    
    };  
}; 

ko.bindingHandlers.popover = { 

    update: function (element, valueAccessor, allBindingsAccessor) { 
     var value = valueAccessor(), 
      valueUnwrap = ko.unwrap(value); 

     if (valueUnwrap === false) { 
      $(element).popover('show'); 
     } else { 
      $(element).popover("destroy"); 
     } 
    } 
};