使用淘汰赛自动显示 twitter bootstrap 模态对话框 [英] Show twitter bootstrap modal dialog automatically with knockout

查看：22
本文介绍了使用淘汰赛自动显示 twitter bootstrap 模态对话框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

问题:我使用了 visible 绑定，但结果证明它很麻烦，而且不能正常工作，因为它只显示对话框，没有覆盖，并且淡入淡出(如果有)不起作用.

HTML:

<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h3 data-bind="text:name"></h3>
<div class="modal-body"><form data-bind="submit:deselectItem"><!-- 此处项目的编辑器--></表单>

<div class="modal-footer"><a href="#" class="btn" data-bind="click:deselectItem">关闭</a>

此模型是具有 observableList、obervable selectedItem 和将 selectedItem 设置为 null 的 deselectItem 函数的简单对象.

解决方案

据我所知，(可能)最好的方法是创建一个 ko 绑定处理程序，我称之为 showModal:

ko.bindingHandlers.showModal = {初始化:函数(元素，valueAccessor){}，更新:函数(元素，valueAccessor){var value = valueAccessor();如果(ko.utils.unwrapObservable(值)){$(element).modal('show');//这是在对话框内聚焦输入字段$("输入", 元素).focus();}别的 {$(元素).modal('隐藏');}}};

用法是这样的:

<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h3 data-bind="text:name"></h3>
<div class="modal-body"><form data-bind="submit:deselectItem"><!-- 此处项目的编辑器--></表单>

<div class="modal-footer"><a href="#" class="btn" data-bind="click:deselectItem">关闭</a>

I need to show modal dialog for editing item in single page app when I select an item from list.

Problem: I used visible binding, but that turned out to be cumbersome, and it does not work properly, as it shows only dialog, without overlay, and fade (if any) does not work.

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>

Model for this is simple object with observableList, obervable selectedItem, and deselectItem function which sets selectedItem to null.

解决方案

As I figured out, the (probably) best way to do this is to create a ko binding handler, I called it 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');
        }
    }
};

Usage is like this:

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

这篇关于使用淘汰赛自动显示 twitter bootstrap 模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆