5

必要最小限の JS プログラミングを (最新のブラウザーで) 深く学習するための実践的な演習として、顧客記録を維持するための SPA を構築しています。私が使用している唯一の外部ライブラリは Mithril.js MVC です。これまでのところ、データベースからのライブデータを含むテーブルビューを取得しました。これには、各レコードの編集、マージ、および削除ボタンが含まれています。インラインの「フォーム」と保存/キャンセルを使用して、編集が完了し、うまく機能しています。

私は現在、削除とマージを実装しようとしていますが、どちらもアクションを実行する前にポップアップ確認が必要です。私はデスクトップ GUI 環境で何をするかを正確に知っているので、障害は Mithril 自体よりもブラウザーのフロントエンドの理解が不足している可能性があります。

理想的には、ポップアップを表す自己完結型の再利用可能な「ポップアップ」コンポーネントを作成したいのですが、特に Mithril を使用して JS でこれを行う方法がわかりませんが、それだけではありません。あるビューを別のビューの上に重ねるためのミスリル。

大まかな概要から特定のコード スニペットまで、あらゆる支援をいただければ幸いです。

4

2 に答える 2

5

ビュー モデル フラグを使用して、モーダル ポップアップの可視性を制御することをお勧めします。

//modal module
var modal = {}
modal.visible = m.prop(false)
modal.view = function(body) {
  return modal.visible() ? m(".modal", body()) : ""
}

//in your other view
var myOtherView = function() {
  //this button sets the flag to true
  m("button[type=button]", {onclick: modal.visible.bind(this, true)}, "Show modal"),

  //include the modal anywhere it makes sense to
  //its visibility is taken care by the modal itself
  //positioning is controlled via CSS
  modal.view(function() {
    return m("p, "modal content goes here")
  })
}

モーダル ダイアログを作成するには、多くの CSS フレームワーク (Bootstrap など) のいずれかのスタイルを使用するか.modal、独自の CSS でスタイルを設定します。

/*really contrived example to get you started*/
.modal {
  background:#fff;
  border:1px solid #eee;
  position:fixed;
  top:10px;
  left:100px;
  width:600px;
}
于 2014-09-19T01:56:19.743 に答える
4

MVCを完全に取得していないだけかどうかはわかりませんが、ポップアップの詳細を含むビューモデルオブジェクトを設定するだけで、現在設定されている場合はビューを生成するときに、ポップアップを含むdivにデータを入力します。CSS は外観と配置を制御します。

したがって、基本的には、現在のアプリケーションの状態に基づいてビューを条件付きで構築するために、Mithril のトップダウンの再レンダリング アプローチに依存しています。

私は実際にポップアップ確認オブジェクトのリストを使用したので、複数の確認がキューに入る可能性があります。

コントローラーで、確認キューを作成します。

function Controller() {
    ...
    this.confirmation                   =[];
    ...
    }

ビューで、確認がキューに入れられている場合は確認ビューを作成し、divそれ以外の場合は空のプレースホルダーを作成します (コンテナ要素が表示されず、レンダリングごとに消える場合、ミスリルの差分が最適に機能します)。

function crtView(ctl) {
    ...
    return m("div", [
        ...
        crtConfirmationView(ctl),
        ...
        ]);
    }

function crtConfirmationView(ctl) {
    var cfm=ctl.confirmation[0];

    return m("div#popup-confirm",(cfm ? muiConfirm.crtView(ctl,cfm.title,cfm.body,cfm.buttons) : null));
    }

次に、確認が必要なときはいつでも、確認オブジェクトをキューにプッシュし、Mithril の描画システムを実行してビューを再構築します。

function deleteRecord(ctl,evt,row,idx,rcd) {
    var cfm={
        title   : m("span","Delete Customer: "+rcd.ContactName),
        body    : [
            m("p","Do you really want to delete customer "+rcd.CustomerId+" ("+rcd.ContactName+") and all associated appointments and addresses?"),
            m("p.warning", "This action cannot be undone. If this is a duplicate customer, it should be merged with the other record."),
            ],
        buttons : deleteButtons,
        proceed : "delete",
        index   : idx,
        record  : rcd,
        };

    ctl.confirmation.push(cfm);
    }

確認オブジェクトには、confirmヘルパー関数crtViewが確認ビューを作成し、ユーザーがボタンをクリックしたとき (または ENTER や ESCAPE などを押したとき) にアクションを実行するために必要なすべてのプロパティが含まれています。

注: 配列インデックスについて質問がある場合に備えて、データ モデル内のレコードを識別するために配列インデックスを使用することから離れました (削除が完了したら、配列要素を削除する必要があります)。代わりに、データベース ID を使用して影響を受けるレコードを見つけます。これは、リストの並べ替えなど、モデル内の変更が介在することに対して回復力があります。

于 2014-10-11T20:42:10.643 に答える