twitter-bootstrap – 用knockout自动显示twitter引导模态对话框

发布时间：2020-12-18 00:15:40 所属栏目：安全来源：网络整理

导读：当我从列表中选择一个项目时，我需要显示在单页应用程序中编辑项目的模态对话框。问题：我使用可见的绑定，但是这样做很麻烦，它不能正常工作，因为它只显示对话框，没有覆盖，并且渐变(如果有的话)不起作用。 HTML： div class="modal hide fade" data-bin

当我从列表中选择一个项目时，我需要显示在单页应用程序中编辑项目的模态对话框。

问题：我使用可见的绑定，但是这样做很麻烦，它不能正常工作，因为它只显示对话框，没有覆盖，并且渐变(如果有的话)不起作用。

HTML：

<div class="modal hide fade" data-bind="visible:selectedItem,with:selectedItem">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 data-bind="text:name"></h3>
  </div>
  <div class="modal-body">
    <form data-bind="submit:deselectItem">
        <!-- editor for item here -->
    </form>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-bind="click:deselectItem">Close</a>
  </div>
</div>

这样的模型是具有observableList，obervable selectedItem和deselectItem函数的简单对象，它将selectedItem设置为null。

解决方法

正如我想到的，(可能)最好的方法是创建一个ko绑定处理程序，我称之为showModal：

ko.bindingHandlers.showModal = {
    init: function (element,valueAccessor) {},update: function (element,valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');
            // this is to focus input field inside dialog
            $("input",element).focus();
        }
        else {
            $(element).modal('hide');
        }
    }
};

用法是这样的：

<div class="modal hide fade" data-bind="showModal:selectedItem,with:selectedItem">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 data-bind="text:name"></h3>
  </div>
  <div class="modal-body">
    <form data-bind="submit:deselectItem">
        <!-- editor for item here -->
    </form>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-bind="click:deselectItem">Close</a>
  </div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!