弹出使用淘汰赛js

Question

我正在将我的一个较旧的jquery插件从DOM丛林迁移到这个花哨的mvvm框架淘汰赛。

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

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

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

Answer 1

创建自定义绑定，在可观察的上打开/关闭函数触发器。

我已经为jQuery Dialog做了一个自定义绑定，它将此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 2

它也可以在没有自定义绑定的情况下完成。 示例如下

            <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 3

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

这几乎可以满足您的要求。 它是可深度配置的，并且在稳定的开发中（我们自己在我们的Web应用程序中使用它）。

免责声明：我是One.com的开发者。 我也是起源于上述lib的人。