Показать твиттер-бутстрап модальный диалог автоматически с нокаутом

Мне нужно показать модальный диалог для редактирования элемента в приложении одной страницы, когда я выбираю элемент из списка.

Проблема: я использовал привязку 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>

Модель для этого простого объекта с функцией observableList, obervable selectedItem и deselectItem, которая устанавливает selectedItem в null.

Ответы

Ответ 1

Как я понял, лучший способ сделать это (возможно) - создать обработчик привязки 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>

Ответ 2

Мне нравится простой подход Горанса. Единственная проблема заключается в том, что html не будет работать в Bootstrap 3+.
Класс" скрыть "теперь включен по умолчанию, а наличие класса в модальном div приведет к тому, что div не будет отображаться. См. http://www.bootply.com/bootstrap-3-migration-guide
Это работает:

<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.functionName вызовет функцию в вашей ViewModel.

Ответ 3

Это становится намного проще, если вы примените следующий шаблон:

<form class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem, submit:deselectItem">
    ...
</form>

Таким образом, вы получаете форму обратно в обработчик отправки и можете ее правильно закрыть:

deselectItem = function(form){
  ...
  $(form).modal('hide');
}

Ответ 4

Я использовал этот настраиваемый обработчик привязки для модальных загрузок. Также в модальном я добавил два момента datepicker. но когда я использую этот обработчик привязки, модальный вид отображается в событии click, но datepicker div также отображается

если я не использую это и не использую

$('.classname_of_bootstrap_modal').modal('show')

Модаль работает отлично.

Итак, я думаю, что есть проблема в использовании этого обработчика привязки и не в состоянии его получить.

Я прокомментировал это

$("input", element).focus();

При этом div datepicker не отображается автоматически. они видны, когда я нажимаю на них, но проблема при удалении это, если я нажму на один из datepicker, он закрывает мода бутстрапа. но он не должен закрывать его.