我無法在我的網站上訪問我的問題的正確標識

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.