Meteor.js 实现单例确认框

Question

我尝试创建一个可重复使用的确认框，但我不确定如何以流星的方式实现它。

我有一个确认框的模板。文本和按钮值应该是动态的。

<template name="confirm">
  {{#if show}}
    {{text}}
    <button class="cancel">cancel</button>
    <button class="confirm">{{action}}</button>
  {{/if}}
 </template>

我有一个带有删除按钮的用户模板。

<template name="user">
  <h1>{{name}}</h1>
  <button class="delete">delete user</button>
</template>

在应用程序模板中，我显示用户列表并呈现确认模板。

<template app="app">
  {{#each user}}
    {{> user}}
  {{/each}}

  {{> confirm}}
</tempalte>

现在，当我单击用户项的删除按钮时，我想显示确认框。

Template.confirm.helpers({
  text: function(){
    return Session.get('confirmText');
  },
  action: function(){
    return Session.get('confirmAction');
  },
  show: function(){
    return Session.get('showConfirm');
  },
});

Template.user.events({
  'click .delete': function(){
     Session.set('confirmAction', 'delete');
     Session.set('confirmText', 'Are you sure?');
     Session.set('showConfirm', true);
  }
});

我的确认框按原样显示，但我如何触发从确认框中删除用户？

我是否走在正确的轨道上？我尝试在每个用户模板中呈现一个确认模板，但一次应该只有一个活动确认框。

Answer 1

您当然可以使用此模式使其工作。您需要做的唯一补充是在 Session 中设置您要删除的用户 id，以便您的删除方法可以访问它：

Template.user.events({
  'click .delete': function(){
    Session.set('confirmAction', 'delete');
    Session.set('confirmText', 'Are you sure?');
    Session.set('showConfirm', true);
    /* addition - this._id refers to the id of the user in this template instance */
    Session.set('userToDelete', this._id); 
  }
});

然后：

Template.confirm.events({
  "click button.confirm": function(){
    Meteor.call(
      "deleteUser",
      Session.get("userToDelete"),
      function(error, result){
        Session.set("userToDelete", null);
      }
    );
  }
});

但是，更灵活和可扩展的模式是使用附加到模板实例的ReactiveVar 或ReactiveDict 来获取和设置您确认删除用户模板内部的用户。这样，您就不会使用真正只涉及一种行为的键来加载全局 Session 对象。您可以在其他不相关的上下文中重用您的 confirm 模板。

更新

这是一种使用私有响应变量跨上下文重用确认按钮的方法。要查看是否打开了另一个确认框，您可以先检查 Session 属性。

Session.setDefault("confirming", false);

confirm 模板中的 text 和 action 属性是从其用户父级设置的：

<template app="app">
  {{#each user}}
    {{> user}}
  {{/each}}
</template>

<template name="user">
  <h1>{{name}}</h1>
  <button class="delete">delete user</button>
  {{#if show}}
    {{> confirm text=text action=action}}
  {{/if}}
</template>

<template name="confirm">
  {{text}}
  <button class="cancel">cancel</button>
  <button class="confirm">{{action}}</button>
</template>

我们还在用户父级中为其设置了帮助器和事件：

Template.user.created = function(){
  this.show = new ReactiveVar(false);
}

Template.user.helpers({
  name: function(){
    return this.name;
  },
  show: function(){
    return Template.instance().show.get();
  },
  text: function(){
    return "Are you sure?";
  },
  action: function(){
    return "delete user";
  }
});

Template.user.events({
  "click button.delete": function(event, template){
    if (Session.get("confirming")){
      console.log("You are already confirming another deletion.");
      return;
    }
    Session.set("confirming", true);
    template.show.set(true);
  },
  "click button.confirm": function(event, template){
    Meteor.call(
      "deleteUser",
      this._id,
      function(error, result){
        template.show.set(false);
        Session.set("confirming", false);
      }
    )
  }
});

现在您可以根据其父级在其他地方为 confirm 模板提供不同的上下文。