javascript - 在每个 show() 上创建新的模式对话框

Question

Meteor js 中的响应式模式

请帮助我使用 Meteor js 中的 react 模式，首先我注意到，如果我从模式模板中的 jQuery 选择器中获取一些值，我仅在第一个模式“show()”上获得正确的值，在第一个模式之后，他给了我相同的值每次点击。然后我查看代码，有许多具有不同 id 的模态，例如 (id="rm-1e7385aa-4ca8-491b-be4e-81baa2afffbc")，可能会导致问题。我尝试使用模板保留但没有成功。你能帮我解决这个问题吗？

代码类似这样，

// Reactive Table events
  Template.reactiveTebleList.events({
      'click .reactive-table tbody tr': function (event) {
      var rd_editorder = ReactiveModal.initDialog(rm_EditOrder);
      rd_editorder.show();
     }
 });

   var rm_EditOrder = {
    type: 'type-default',  
    template: Template.tmp_EditOrder, 
     title: "Edit Order",
     removeOnHide: true,
     closable: true,
     buttons: {
          "cancel": {
            class: 'btn-danger',
            label: 'Cancel'
          },
          "ok": {
            closeModalOnClick: true, 
            class: 'btn-info',
            label: 'Back'
          }
      }
    }; 

Template.tmp_EditOrder.events({
'click #saveposition': function(e){

      var selectedPosition = $('#selectPosition').find(":selected").text();
      console.log("selectedPosition: " + selectedPosition);

      rm_EditOrder.hide();
},


<template name="tmp_EditOrder">
    <select class="form-control" id="selectPosition">
                {{#each position}}
                     <option>{{this}}</option>
                {{/each}}
     </select>
 <button type="submit" id="saveposition" class="btn btn-primary">Save Position</button>
</template>

Answer 1

在每个模态关闭时使用 $(".modalClass").remove();或者使用 Meteor 包来为您处理该过程。我一直用https://github.com/pahans/reactive-modal 。正如您在该包的文档中看到的，模式 dom 的删除是在关闭模式时为您完成的。注意 removeOnHide 如果您想保留模态框的 dom，也可以将其设置为 true。

var shareDialogInfo = {
template: Template.appShareDialog,
title: "Share the app",
modalDialogClass: "share-modal-dialog", //optional
modalBodyClass: "share-modal-body", //optional
modalFooterClass: "share-modal-footer",//optional
removeOnHide: true, //optional. If this is true, modal will be removed from DOM upon hiding