Question

嘿，我正在制作流星网站，人们可以在其中添加问题并获得答案。我想为每个问题添加删除功能，以便用户可以删除他们的问题。如果我直接提取问题的ID并立即删除它，它就可以了。但是，如果我尝试通过像“你确定：是/否”这样的引导模式进行确认，并希望如果它们单击是，则应该删除该问题。但不是那个特别的问题，窗口中的第一个问题被删除了。

这是我的HTML代码：

<template>
    <div class="container margin-top">
        <div class="row">
            {{#each ques}}
                <div class="col-xs-12" id="{{_id}}">
                    <div class="thumbnail">
                        <div class="caption">
                            <h3><span>Q.</span> {{ques}}</h3>
                            <p>
                                <span><b><i>Ans.</i></b></span> 
                                <span>{{&gt; editableText collection="ques" field="ans"}}</span>
                            </p>
                            <button class="js-show-del-ques">Delete</button>
                            <div class="modal fade" id="ques_del_form">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <div class="modal-title">
                                                <h1>Are you sure?</h1>
                                            </div>
                                        </div>
                                        <div class="modal-body">
                                            <button class="js-del-ques">Delete</button> <button class="" data-dismiss="modal">cancel</button>
                                        </div>
                                        <div class="modal-footer"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
</template>

这是我的js代码：

Template.ques.events({
    'click .js-show-del-ques': function(event) {
        $("#ques_del_form").modal('show');
    },
    'click .js-del-ques': function(event) {
        var ques_id = this._id;
        console.log(ques_id);
        $("#" + ques_id).hide('slow', function() {
            Ques.remove({
                "_id": ques_id
            });
        })
        $("#ques_del_form").modal('hide');
    },
});

如果我这样做：

<template>
    <div class="container margin-top">
        <div class="row">
            {{#each ques}}
                <div class="col-xs-12" id="{{_id}}">
                    <div class="thumbnail">
                        <div class="caption">
                            <h3><span>Q.</span> {{ques}}</h3>
                            <p><span><b><i>Ans.</i></b></span> <span>{{&gt; editableText collection="ques" field="ans"}}</span></p><button class="js-del-ques">Delete</button>
                        </div>
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
</template>

在js：

Template.ques.events({
    'click .js-del-ques': function(event) {
        var ques_id = this._id;
        console.log(ques_id);
        $("#" + ques_id).hide('slow', function() {
            Ques.remove({
                "_id": ques_id
            });
        })
    },
});

然后它运作得很好，并删除了特定的问题。

为什么不起作用？是什么原因导致特定问题没有从模态中删除？

非常感谢帮助。

感谢。

Answer 1

在您的版本中，this._id在您的事件处理程序中标识您期望的问题，因为数据上下文（this）由模板中的#each块设置。

您的版本无法解决问题：

首先，在您#each区块内<div class="modal fade" id="ques_del_form">。 #each将多次创建此div，将具有相同id的多个元素放入DOM中。这是无效的，也是您所看到的行为的根本原因。

您的click .js-show-del-ques事件正在尝试查找此元素以显示相应的模式对话框，但当然有多个副本，在您的情况下，它似乎显示了它找到的第一个。由于这是无效的标记，您可能会从其他浏览器获得不同的非标准行为。

更好的方法是将模态对话框移出#each，因为您只需要一份副本。请尝试以下方法：

ques.html

<template>
    <div class="container margin-top">
        <div class="row">
            {{#each ques}}
                <div class="col-xs-12" id="{{_id}}">
                    <div class="thumbnail">
                        <div class="caption">
                            <h3><span>Q.</span> {{ques}}</h3>
                            <p>
                                <span><b><i>Ans.</i></b></span> 
                                <span>{{&gt; editableText collection="ques" field="ans"}}</span>
                            </p>
                            <button class="js-show-del-ques">Delete</button>
                        </div>
                    </div>
                </div>
            {{/each}}
        </div>
        <div class="modal fade" id="ques_del_form">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="modal-title">
                            <h1>Are you sure?</h1>
                        </div>
                    </div>
                    <div class="modal-body">
                        <button class="js-del-ques">Delete</button> <button class="" data-dismiss="modal">cancel</button>
                    </div>
                    <div class="modal-footer"></div>
                </div>
            </div>
        </div>

    </div>
</template>

ques.js

import { ReactiveVar } from 'meteor/reactive-var'

Template.ques.onCreated(function() {
  this.SelectedQuestionToDelete = new ReactiveVar();
});

Template.ques.events({
    'click .js-show-del-ques': function(event, template) {
        template.SelectedQuestionToDelete.set(this._id);
        $("#ques_del_form").modal('show');
    },
    'click .js-del-ques': function(event, template) {
        var ques_id = template.SelectedQuestionToDelete.get();
        console.log('deleting ' ques_id);
        $("#" + ques_id).hide('slow', function() {
            Ques.remove({
                "_id": ques_id
            });
        })
        $("#ques_del_form").modal('hide');
    },
});

For an explanation of ReactiveVar see here.

我无法在我的网站上访问我的问题的正确ID

1 个答案: