18

リストからアイテムを選択するときに、シングル ページ アプリでアイテムを編集するためのモーダル ダイアログを表示する必要があります。

問題: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、observable selectedItem、および selectedItem を null に設定する deselectItem 関数を備えた単純なオブジェクトです。

4

4 に答える 4

42

私が理解したように、これを行うための（おそらく）最良の方法は、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>
于 2013-02-04T09:39:48.657 に答える
5

私はゴランのシンプルなアプローチが好きです。唯一の問題は、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>

この例では、click:$root.functionName が ViewModel の関数を呼び出します。

于 2014-03-07T11:16:15.783 に答える
0

このカスタム バインディング ハンドラーをブートストラップ モーダルに使用しました。また、モーダルでは、2 つの瞬間の日付ピッカーを追加しました。しかし、このバインディングハンドラーを使用すると、クリックイベントでモーダルが表示されますが、datepicker divも表示されます

これを使わずに使うと

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

モーダルは完全に正常に機能します。

したがって、このバインディング ハンドラーの使用には問題があり、それを取得できないと思います。

これにコメントしました

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

そうすることで、datepickerdivは自動的に表示されません。それらをクリックすると表示されますが、これを削除する際の問題は、いずれかをクリックするdatepickerと、ブートストラップモーダルが閉じます。しかし、それはそれを閉じるべきではありません。

于 2014-06-30T11:34:08.350 に答える