彈出使用淘汰賽js

Question

我正在從DOM叢林遷移我的舊版jquery插件之一到這個奇特的mvvm框架淘汰賽。

我將使用哪種技術來正確顯示彈出式容器？我希望通過'通過電話'來填充它，因爲我每次都得到一個json feed。

我嘗試了使用with binding的方法，但它仍嘗試在第一次運行時填充部分。

​​

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> 

視圖模型代碼：

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

創建自定義綁定，在observable上創建自己的open/close函數觸發器。

我已經爲jQuery對話框做了一個自定義綁定，它使用這個approuch和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

這幾乎做了你要求什麼。它具有很強的可配置性，並且在穩定的發展中（我們自己在我們的Web應用程序中使用它）。

聲明：我是One.com的開發者。我也是發起上述lib的人。