3

Задача: показать скрыть сообщение c каким-то результатом.

Решение: реализовал через custom bindings, получилось довольно много кода.

function MyViewModel() {
   var self = this;

   self.state = ko.observable(false);
   self.message = ko.observable('');
   self.save = function() {
      self.state(true);
      self.message("Result of saving " + new Date());

   };
    //
   ko.bindingHandlers.slideVisible = {
      init: function(element, valueAccessor) {
         var value = ko.unwrap(valueAccessor());
         $(element).toggle(value);
      },
      update: function(element, valueAccessor, allBindings) {
         var value = ko.unwrap(valueAccessor()),
            duration = allBindings.get("slideDuration") || 400,
            delay = allBindings.get("slideDelay") || 2000;
         if (value) {
            $(element).slideDown(duration);
            setTimeout(function() {
               $(element).slideUp(duration, function() {
                  self.state(false);
                  self.message('');
               });
            }, delay);
         }
      }
   };
}
//
ko.applyBindings(new MyViewModel());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<button class="btn btn-default" data-bind="click: save, disable:state">Save</button>
<br>
<div class="alert alert-success" data-bind="slideVisible: state, text: message"></div>

Пример на JSFiddle

Вопрос: есть ли какой-то более правильный и элегантный способ реализовать подобный функционал на Knockout.js? Смущает большой объем кода, для такой простой задачи.

1 ответ 1

1

Не обязательно использовать разметку knockout.js всюду. Всяческие диалоги куда удобнее вызывать императивно, а не "пробрасывать" логику показа через паттерн MVVM.

Попробуйте сделать вот так:

function showMessage(options) {
  var duration = 'duration' in options ? options.duration : 400;
  var delay = 'delay' in options ? options.delay : 2000;

  var $div = $('<div>').html($('#messageDialogTemplate').html()).appendTo(document.body);
  ko.applyBindings(options, div[0]);

  return $div.slideDown(duration).then(function() {
    return $.delay(delay);
  }).then(function() {
    return $div.slideUp(duration);
  }).always(function() {
    ko.cleanNode($div[0]);
    $div.remove();
  })
}
2
  • Pavel Mayorov, могли бы вы написать ваш пример в JSFiddle? Подозреваю, что не тестировали. Спасибо.
    – user18707
    1 мар 2016 в 4:29
  • @pavelchervov нет, не могу. Но если у вас возникли ошибки - могу на них глянуть. 1 мар 2016 в 4:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.