弹出使用敲击js [英] Popup using knockout js

问题描述

我正在将我的一个旧的jQuery插件从DOM丛林迁移到这个花哨的mvvm框架敲门。

我使用哪种技术来正确显示弹出式容器？我要通过电话来填充它，因为我每次都会收到一个json feed。

我尝试使用with绑定的方法，但它仍然尝试在其第一个运行时填充部分。

 <！ -  ko with：daySubmitFormViewModel  - > 
< div class =ec-consulation-lightbox> 
< form id =cFormclass =form-container> 
 //这里有一些绑定。 
< / form> 
< / div> 
<！ -  / ko with： - > 
  

解决方案

也可以没有自定义绑定。例如在

 < div class =modalWindowBackgrounddata-bind =visible：popupDialog> 
< div class =modalWindowdata-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 =buttonclass =closeButtondata-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）; 
}; 
 
 //打开弹出窗口的代码
 self.remove = function（）{
 ....一些代码... 
 if（someCondition）{
 self.showAlert（'SomeTitle'，'Message'，'OK'）; 
 return; 
} 
 ....一些代码... 
}; 
  

i'm migrating one of my older jquery plugins from DOM jungle to this fancy mvvm framework knockout.

Which technique would i use to properly display a popup container? I ahve to populate it 'by call' since i get a json feed every time.

I tried an approach using the with binding, but it still attempts to populate the partial at its first runtime.

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

解决方案

It can be done without custom binding as well. Example is below

            <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 code:

    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 ...
   };

这篇关于弹出使用敲击js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！