Проверка нокаута и Qtip

Question

В настоящее время я использую JQuery Validation и Qtip, чтобы справиться с фактической проверкой и отображением информации на экране с помощью уведомлений о стиле приятных всплывающих подсказок при ошибках проверки с использованием компонента errorPlacement параметров проверки.

В настоящее время каждый viewModel имеет свой собственный настраиваемый метод для настройки и отмены проверки и обратных вызовов, однако я старался найти более удобный способ сделать это: добавление пользовательской привязки для настройки моих правил проверки с помощью привязки данных или альтернативный способ, но при этом дают одинаковые результаты (т. е. ошибка возникает при возникновении ошибки проверки и сообщает Qtip отображать ошибку для данного элемента).

Теперь, прежде чем я начал делать сам, я только что проверил его и нашел Knockout Validation, который, как мне казалось, был отличной идеей, я мог применить свою логику проверки непосредственно к данным в моей модели viewModel, а затем просто найти какой-то обратный вызов для получить Qtip, чтобы начать, однако, похоже, нет обратного вызова, который я могу найти документально. Кажется, что библиотека делает все, что я хочу, для проверки стороны вещей, а не для отображения стороны вещей. Я просмотрел исходный код и примеры, но не мог видеть ничего, кроме ko.validation.group (viewModel), который дал бы мне наблюдаемый, содержащий ошибки, но я не уверен, могу ли я использовать его так же, как и я ожидая.

Вот пример того, как происходит моя текущая проверка:

/*globals $ ko */ 
function SomeViewModel() { 

    this.SetupValidation = function() { 
     var formValidationOptions = { 
      submitHandler: self.DoSomethingWhenValid, 
      success: $.noop, 
      errorPlacement: function (error, element) { 
       if (!error.is(':empty')) 
       { qtip.DoSomethingToDisplayValidationErrorForElement(element, error); } 
       else 
       { qtip.DoSomethingToHideValidationErrorForElement(element); } 
      } 
     }; 

     $(someForm).validate(formValidationOptions); 
     this.SetupValidationRules(); 
    }; 

    this.SetupValidationRules = function() { 
     $(someFormElement1).rules("add", { required: true, minlength: 6, maxlength: 20, alphaNumeric: true }); 
     $(someFormElement2).rules("add", { required: true, minlength: 6, maxlength: 20 }); 
     $(someFormElement3).rules("add", { required: true, email: true, }); 
    }; 
} 

В настоящее время я уверен, что могу устранить необходимость в методе правил проверки, добавив пользовательские привязки, так что я могу установить проверку в данных -bind, однако, если возможно, я хотел бы использовать такой же подход обратного вызова с существующей привязкой к нокауту-валидации.

Answer 1

Я не использовал нокаут-валидацию конкретно, но я написал что-то подобное в прошлом. Быстрый взгляд на источник показывает, что каждый расширенный наблюдаемый получает суб-наблюдаемыйisValid. Это может быть использовано для скрытия отображаемых сообщений в вашей разметке с использованием обычных видимых привязок нокаута.

Чтобы заставить QTip работать, пользовательское связывание может подписаться на это свойство isValid и выполнить необходимую инициализацию, чтобы показать/скрыть QTip при запуске.

EDIT

Вот пример, чтобы вы начали

http://jsfiddle.net/madcapnmckay/hfcj7/

HTML:

<!-- Note that you have to reference the "qtipValMessage" binding --> 
<!-- using the "value" binding alone is not enough    --> 
<input data-bind="value: emailAddress, qtipValMessage : emailAddress" /> 

JS:

ko.bindingHandlers.qtipValMessage = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var observable = valueAccessor(), $element = $(element); 
     if (observable.isValid) { 
      observable.isValid.subscribe(function(valid) { 
       if (!valid) { 
        $element.qtip({ 
         overwrite: true, 
         content: { 
          text: observable.error 
         } 
        }); 
       } else { 
        $element.qtip("destroy"); 
       } 
      }); 
     } 
    } 
}; 

Answer 2

Я редактировал сообщение madcapnmckay, но различия стали достаточно значительными, и я думаю, что нужен новый ответ.

В большой степени это связано с сообщением madcapnmckay, но он исправляет ошибку, указанную MorganTiley. Оригинал работает только в том случае, если пользователь изменил наблюдаемый. Если они этого не сделали, код никогда не запускается. Таким образом, я изменил его так, что он запускает код всплывающей подсказки, когда он создается, в дополнение к тому, когда он изменяется.

ko.bindingHandlers.qtipValMessage = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var observable = valueAccessor(), $element = $(element); 
     if (observable.isValid) { 
      var updateTooltip = function (valid) { 
       if (!valid) { 
        $element.qtip({ 
         overwrite: true, 
         content: { 
          text: observable.error 
         } 
        }); 
       } else { 
        $element.qtip("destroy"); 
       } 
      } 
      updateTooltip(); 
      observable.isValid.subscribe(updateTooltip); 
     } 
    } 
}; 

Единственным недостатком является то, что подсказка будет отображаться при наведении курсора мыши, прежде чем проверка нокаута была запущена (пример, у вас есть «необходимый» проверки на поле, прежде чем нажать представить подсказку покажет говоря поле требуется, но поле не будет выделяться розовым цветом). Однако, если вы измените поле, всплывающая подсказка исчезнет, ​​если поле будет действительным.

Мое приложение не использует qtip, а скорее Twitter Bootstrap Tooltip, так что вот код для этого.

ko.bindingHandlers.invalidTooltip = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var observable = valueAccessor(), $element = $(element); 
     if (observable.isValid) { 
      var updateTooltip = function (valid) { 
       if (!valid) { 
        $element.attr("data-original-title", observable.error); 
        $element.tooltip(); 

       } else { 
        $element.tooltip("destroy"); 
       } 
      } 
      updateTooltip(); 
      observable.isValid.subscribe(updateTooltip); 
     } 
    } 
};