5

古いjqueryプラグインの1つをDOMジャングルからこの派手なmvvmフレームワークノックアウトに移行しています。

ポップアップコンテナを適切に表示するには、どの手法を使用しますか？毎回jsonフィードを取得するので、「呼び出しで」データを入力する必要があります。

withバインディングを使用してアプローチを試みましたが、それでも最初の実行時にパーシャルを設定しようとします。

<!-- ko with: daySubmitFormViewModel -->
    <div class="ec-consulation-lightbox">
        <form id="cForm" class="form-container">
           // Some bindings here.
        </form>
    </div>
<!-- /ko with: -->
4

3 に答える 3

7

カスタムバインディングを作成し、オブザーバブルでそのオープン/クローズ機能トリガーを設定します。

このアプローチをKOテンプレートと組み合わせて使用​​するjQueryDialogのカスタムバインディングを実行しました。

<div id="dialog" data-bind="dialog: { autoOpen: false, modal: true, title: dialogTitle }, template: { name: 'dialog-template', data: dialogItem, 'if': dialogItem }, openDialog: dialogItem"></div>

私のバインディングは、他のいくつかの https://github.com/AndersMalmgren/Knockout.Bindingsと一緒にここにあります。

ライブデモhttp://jsfiddle.net/H8xWY/102/

于 2013-02-25T07:57:52.353 に答える
7

カスタムバインディングなしでも実行できます。例を以下に示します

            <div class="modalWindowBackground" data-bind="visible: popupDialog" >
                <div class="modalWindow" data-bind="with:popupDialog">
                    <div class="content">
                        <h2 data-bind="text: title"></h2>
                        <p>
                            <span data-bind="text: message"></span>
                        </p>
                        <div class="buttonSpace">
                            <input type="button" class="closeButton" data-bind="value: closeButtonText, click: $root.hidePopupDialog" />
                        </div>                            
                    </div>
                </div>
            </div>

ビューモデルコード：

    self.showAlert = function (title, message, closeButtonText) {
        self.popupDialog({ title: title, message: message, closeButtonText: closeButtonText });
    };
    self.hidePopupDialog = function () {
        self.popupDialog(null);           
    };

  //Code which opens a popup
  self.remove = function () {
        .... some code ...
        if (someCondition) {
          self.showAlert('SomeTitle', 'Message', 'OK');
          return;
        }
        .... some code ...
   };
于 2013-11-14T09:08:16.600 に答える
2

https://github.com/One-com/knockout-popupTemplate

それはあなたが求めていることをほぼ実行します。それは深く構成可能であり、着実に開発されています（私たちは自分たちのWebアプリケーションでそれを使用しています）。

免責事項：私はOne.com開発者です。私は上記のlibを作成した人でもあります。

于 2015-11-17T08:07:49.403 に答える