然后自动显示twitter引导模式对话框?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (51)

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

问题:我用visible绑定,但结果是很麻烦的,它不能正常工作,因为它只显示对话框,没有覆盖,并且不工作。

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>

该模型是一个简单的对象,它包含可观察的List、可实现的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>
用户回答回答于

我喜欢Goran的简单方法。唯一的问题是,html将不能在Bootstrap 3+中工作。

默认情况下,“隐藏”类现在是启用的,并且将它作为类在模式div上,将导致div不显示。

这样做是可行的:

<div class="modal fade" data-bind="showModal:selectedItem, with:selectedItem">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h3 data-bind="text:TextItem"></h3>
            </div>
            <div class="modal-body">
                <form data-bind="submit:$root.accept">
                    <!-- editor for item here -->
                    <div class="form-group">
                        <label>Text</label>
                        <input type="text" class="form-control" data-bind="value: TextItem" placeholder="Text">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal">Luk</button>
                <button class="btn" data-bind="click:$root.accept">Gem</button>
            </div>
        </div>
    </div>
</div>

在本例中,单击:$root.function Name将在ViewModel中调用一个函数。

扫码关注云+社区

领取腾讯云代金券