流星.js单例确认框

Meteor.js mplement a singleton confirm box

本文关键字：确认 单例 js 流星      更新时间：2023-09-26

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

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

<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来获取和设置要确认删除的用户，以内部连接到用户模板。这样，您就不会使用实际上只涉及一个行为的键加载全局会话对象。您可以在其他不相关的上下文中重复使用confirm模板。

更新

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

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模板的父级在其他地方为模板提供不同的上下文。

相关文章：