0

Meteor アプリ (coffeescript) で一般的なモーダルを表示するためのヘルパーを作成しました。

modal.coffee は次のとおりです。

showModal = (modalType, title, body, callback) ->
  validModals = [ "Error", "YesNo" ]

  if not modalType in validModals
    alert "Invalid modal type specified"    # @todo - find a better way of handling this error

  Session.set "modalType", modalType
  Session.set "modalTitle", title or ""
  Session.set "modalBody", body or ""
  modalCallback = callback or undefined
  Session.set "showModal", true

Template.modal.title = () ->
  Session.get "modalTitle"

Template.modal.body = () ->
  Session.get "modalBody"

Template.modal.response = () ->
  switch Session.get "modalType" 
    when "Error"
      [{
        css: 'cancel',
        message: 'OK'
      }]
    when "YesNo"
      [
        {
          css: 'cancel',
          message: "No"
        },
        {
          css: 'btn-primary',
          message: "Yes"
        },
      ]

Template.page.shouldShowModal = () ->
  Session.get "showModal"

Template.modal.events {
  'click .cancel': ->  
    Session.set "showModal", false
    cb = modalCallback
    alert "here " + cb
    if cb
      cb(false)
  'click .btn-primary': ->
    Session.set "showModal", false
    cb = Session.get "modalCallback"
    if cb
      cb(true)
}

テンプレートはかなり退屈です。

これが私のクライアントコードです（このヘルパーの呼び出し元のように）：

Template.details.events {
  'click .remove': () ->
    showModal "YesNo", 
      "Are you sure you want to delete this item?", 
      "Deleting an items can't be undone. Are you sure you want to delete?", 
      (response) =>
        if response
          Items.remove this._id, (err) =>
            if err
              showModal "Error", "Error removing item", err.reason

    return false;
}

コールバックを実行できません。私が見たすべての例は、すべてをセッションに入れることになりますが、明らかに関数をjsonに変換できないため、ユーザーが[OK]または[キャンセル]ボタンをクリックしたときに正しく逆シリアル化されません.

ユーザーがモーダルに応答したときにコールバックを実行するにはどうすればよいですか?

4

2 に答える 2

2

Parties の例は、私が気に入っている別のパターンを示しています。セッション変数を使用してダイアログ/モーダルを表示/非表示にし、コールバックをテンプレート イベント ハンドラーに配置します。

たとえば、inviteDialog テンプレートを参照してください: https://github.com/meteor/meteor/blob/master/examples/parties/client/parties.html#L194

このセッション変数は、その可視性を制御します: https://github.com/meteor/meteor/blob/master/examples/parties/client/parties.html#L15

これはコールバックです: https://github.com/meteor/meteor/blob/master/examples/parties/client/client.js#L257

于 2013-02-03T16:09:53.247 に答える
0

あなたが持っているコードの問題は、変数modalCallbackが関数に対してローカルであることだと思います（これはコーヒースクリプトです）。

ただし、お気づきかもしれませんが、このアプローチは実際には正しい方法ではありません。問題は、コールバックがグローバル変数以外の場所に保存されていないため、ホット コード プッシュの場合に失われることです。(つまり、ダイアログが開いている間に meteor プロジェクトのファイルを保存してみて、後でダイアログを閉じたときに何が起こるかを確認してください)。

これは実際には非常に良い質問であり、私は最善のアプローチについて多くのことを考えてきました. 私が今持っている最良の答えは、グローバルなリアクティブ コールバックを使用することです。このようなもの：

Meteor.autorun(function() {
  if (Session.equals('lastDialog', 'alert-dialog') && 
      Session.equals('dialogOpen', false) && 
      Session.equals('lastDialogSuccess', true)) {
    alert("I'm alerting");

    // ensure it doesn't happen again, e.g. on another HCP
    Session.set('lastDialog', null);
  }
});

そのコードは最上位にある必要があるため、HCP で再実行されます。私が設定したこのプロジェクトを見て、それを行うためのより良い方法を見つけてください: https://github.com/tmeasday/dialog-experiment/tree/global-reactivity

おそらく、より良い答えは、「より宣言的/反応的な方法で、別の方法で行う」ことです。わからない。

于 2012-11-12T06:46:59.973 に答える