如何在knockout.js项目中有条件地显示模态对话框？

f0brbegy 于 2023-08-05 发布在其他

关注(0)|答案(1)|浏览(156)

有一个工作表单，其中包含来自knockout.js项目的提交按钮。除此之外，表单还有一个提交按钮。

<form id="formAddNote" data-bind="submit: addNotes" role="form" style="z-index:1041">

     <button type="submit" class="btn" data-bind="enable: SubmitEnabled" style="margin- 
     left:-10px;">Save Note</button>
 </form>

字符串
下面是我的knockout addNotes函数，它启动 AJAX 调用以将数据保存到数据库：

self.addNotes = function () {
     callAjax()

 }

 function callAjax(type, url, callback, data, errorCallback) {
    return $.ajax({
       type: type,
       url: url,
       dataType: 'json',
       contentType: "application/json; charset=utf-8",
       data: data,
       success: callback,
       error: errorCallback
   });
 }

型
下面是带有“取消”和“继续”按钮的模式对话框：

<div id="popUpModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" aria-hidden="true" type="button" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Existing RadConsult Found</h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary" type="button">Continue</button>
                </div>
            </div>
        </div>
    </div>

型
我想在 AJAX 调用之前添加一个步骤，以显示一个模态对话框，通知用户一个注解是否已经存在，并让用户选择cancel以中止或继续提交另一个注解。如何正确地实现对话框？

knockout.js

来源：https://stackoverflow.com/questions/76427025/how-to-conditionally-display-a-modal-dialog-in-a-knockout-js-project

1条答案

按热度按时间

332nm8kg1#

Bootstrap 5公开了一个用于modals的JavaScript API，可用于以编程方式控制modal。请参见jsfiddle示例：https://jsfiddle.net/martlark/hxm83Lqo/18/。示例：
超文本标记语言：

<div id="popUpModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" aria-hidden="true" data-bind="click: clickCancel" type="button" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Existing RadConsult Found</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-bind="click: clickCancel" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary" type="button" data-bind="click: clickContinue">Continue</button>
      </div>
    </div>
  </div>
</div>
<button data-bind="click: clickOpenDialog">
  Do the AJAX
</button>
<div data-bind="visible: mode()=='continue'">
  Continue clicked
</div>
<div data-bind="visible: mode()=='cancel'">
  Cancel clicked
</div>

字符串
视图模型：

class ViewModel {
  constructor() {
    this.mode = ko.observable('start');
    const options = {};
    this.myModal = new bootstrap.Modal(document.getElementById('popUpModal'), options)
  }
  clickOpenDialog(evt) {
    this.mode('confirm');
    this.myModal.show()
  }
  clickContinue(evt) {
    this.mode('continue');
    this.myModal.hide()
  }
  clickCancel(evt) {
    this.mode('cancel');
    this.myModal.hide()
  }
}

viewModel = new ViewModel()
ko.applyBindings(viewModel);

型

赞(0）回复(0）举报 2023-08-05

我来回答

如何在knockout.js项目中有条件地显示模态对话框？

1条答案

相关问题

热门标签

最新问答