javascript 使用淘汰赛js弹出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15053563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Popup using knockout js
提问by artisticMink
i'm migrating one of my older jquery plugins from DOM jungle to this fancy mvvm framework knockout.
我正在将我的一个旧 jquery 插件从 DOM 丛林迁移到这个花哨的 mvvm 框架淘汰赛。
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.
我将使用哪种技术来正确显示弹出容器？我必须通过“调用”来填充它，因为我每次都会收到一个 json 提要。
I tried an approach using the with binding, but it still attempts to populate the partial at its first runtime.
我尝试了一种使用 with 绑定的方法，但它仍然尝试在第一个运行时填充部分。
<!-- ko with: daySubmitFormViewModel -->
<div class="ec-consulation-lightbox">
<form id="cForm" class="form-container">
// Some bindings here.
</form>
</div>
<!-- /ko with: -->
回答by Anders
Create a custom binding, have its open / close function trigger on a observable.
创建自定义绑定，在 observable 上触发其打开/关闭函数。
I've done a custom binding for jQuery Dialog that uses this approuch in combination with KO templates.
我已经为 jQuery Dialog 完成了一个自定义绑定，它结合了 KO 模板使用了这个 approuch。
<div id="dialog" data-bind="dialog: { autoOpen: false, modal: true, title: dialogTitle }, template: { name: 'dialog-template', data: dialogItem, 'if': dialogItem }, openDialog: dialogItem"></div>
You can find my binding here along with some others https://github.com/AndersMalmgren/Knockout.Bindings
你可以在这里找到我的绑定以及其他一些 https://github.com/AndersMalmgren/Knockout.Bindings
Live demo http://jsfiddle.net/H8xWY/102/
回答by Maxim Eliseev
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 ...
};
回答by Gert S?nderby
https://github.com/One-com/knockout-popupTemplate
https://github.com/One-com/knockout-popupTemplate
That pretty much does what you ask for. It's deeply configurable, and under steady development (we use it in our web applications ourselves).
这几乎可以满足您的要求。它是高度可配置的，并且正在稳步发展中（我们自己在我们的 Web 应用程序中使用它）。
Disclaimer: I'm a One.com developer. I am also the person who originated the above mentioned lib.
免责声明：我是 One.com 的开发人员。我也是上述lib的发起人。
