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>

在app模板中，我会显示一个用户列表并呈现确认模板。

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

Meteor.js实现了一个单例确认框

1 个答案: