Всплывающее окно с использованием нокаута js

Question

Я переношу один из моих старых jquery-плагинов из DOM-джунглей в этот причудливый mvvm-фреймворк.

Какую технику я бы использовал для правильного отображения всплывающего контейнера? Я хочу заполнить его «по вызову», так как каждый раз получаю json-канал.

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

<!-- ko with: daySubmitFormViewModel --> 
    <div class="ec-consulation-lightbox"> 
     <form id="cForm" class="form-container"> 
      // Some bindings here. 
     </form> 
    </div> 
<!-- /ko with: --> 

Answer 1

Это может быть сделано без пользовательского связывания, а также. Пример ниже

  <div class="modalWindowBackground" data-bind="visible: popupDialog" > 
       <div class="modalWindow" data-bind="with:popupDialog"> 
        <div class="content"> 
         <h2 data-bind="text: title"></h2> 
         <p> 
          <span data-bind="text: message"></span> 
         </p> 
         <div class="buttonSpace"> 
          <input type="button" class="closeButton" data-bind="value: closeButtonText, click: $root.hidePopupDialog" /> 
         </div>        
        </div> 
       </div> 
      </div> 

код ViewModel:

self.showAlert = function (title, message, closeButtonText) { 
     self.popupDialog({ title: title, message: message, closeButtonText: closeButtonText }); 
    }; 
    self.hidePopupDialog = function() { 
     self.popupDialog(null);   
    }; 

    //Code which opens a popup 
    self.remove = function() { 
     .... some code ... 
     if (someCondition) { 
      self.showAlert('SomeTitle', 'Message', 'OK'); 
      return; 
     } 
     .... some code ... 
    }; 

Answer 2

Создайте пользовательскую привязку, активируйте функцию открытия/закрытия на наблюдаемом.

Я сделал пользовательскую привязку для jQuery Dialog, которая использует этот подход в сочетании с шаблонами KO .

<div id="dialog" data-bind="dialog: { autoOpen: false, modal: true, title: dialogTitle }, template: { name: 'dialog-template', data: dialogItem, 'if': dialogItem }, openDialog: dialogItem"></div> 

Вы можете найти мою привязку здесь наряду с некоторыми другими https://github.com/AndersMalmgren/Knockout.Bindings

http://jsfiddle.net/H8xWY/102/ Живыми демо

Answer 3

https://github.com/One-com/knockout-popupTemplate

Это в значительной степени делает то, что вы просите. Он глубоко настраивается и находится в устойчивом развитии (мы сами используем его в наших веб-приложениях).

Отказ от ответственности: Я разработчик One.com. Я также являюсь человеком, который создал вышеупомянутый lib.