我正在将我的一个旧 jquery 插件从 DOM 丛林迁移到这个花哨的 mvvm 框架淘汰赛。
我将使用哪种技术来正确显示弹出容器？我必须“通过调用”填充它，因为我每次都会得到一个 json 提要。
我尝试了一种使用 with 绑定的方法，但它仍然尝试在第一次运行时填充部分。
<!-- ko with: daySubmitFormViewModel -->
<div class="ec-consulation-lightbox">
<form id="cForm" class="form-container">
// Some bindings here.
</form>
</div>
<!-- /ko with: -->
【问题讨论】：
标签： javascript knockout.js dialog popup viewmodel
也可以在没有自定义绑定的情况下完成。示例如下
<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 ...
};
【讨论】：
创建一个自定义绑定，在可观察对象上触发其打开/关闭函数。
我已经为 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
【讨论】：
https://github.com/One-com/knockout-popupTemplate
这几乎可以满足您的要求。它具有高度可配置性，并且正在稳步开发中（我们自己在 Web 应用程序中使用它）。
免责声明：我是 One.com 开发人员。我也是上述lib的发起人。
【讨论】：