javascript - Meteor.js实现单例确认框

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

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

<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);
  }
});

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

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

最佳答案

您当然可以使用此模式使其工作。您唯一需要做的就是在会话中设置要删除的用户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);

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

<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模板提供不同的上下文。

关于javascript - Meteor.js实现单例确认框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28001968/