Question

我需要帮助我是meteor Js的新手。我试图通过使用 meteor Js 点击按钮打开警告框来实现，但它不起作用。请帮助我这里是我的代码下面看到并建议我。点击这里给出一些澄清在模板中提到的剧集信息打开一个对话框。

模板：

    <template name="newclientinfoform">
    <div><a class="clientinfodetails" href="">Episode Info</a></div>
    </template>

ClientJs：

    Template.newclientinfoform.events({ 
             'click .clientinfodetails' : function CustomAlert(e,t)
             {
                  if (typeof console !== 'undefined')      
             console.log("You pressed the ClientDetails Row");
             e.preventDefault();    
                //alert("Episode Info");
            this.render = function(dialog){
            var winW = window.innerWidth;
               var winH = window.innerHeight;
            var dialogoverlay = document.getElementById('dialogoverlay');
               var dialogbox = document.getElementById('dialogbox');
            dialogoverlay.style.display = "block";
               dialogoverlay.style.height = winH+"px";
            dialogbox.style.left = (winW/2) - (550 * .5)+"px";
               dialogbox.style.top = "100px";
               dialogbox.style.display = "block";
            document.getElementById('dialogboxhead').innerHTML = "Alert Box Header";
               document.getElementById('dialogboxbody').innerHTML = dialog;
            document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()" class="btn">OK</button>';
            }
            this.ok = function(){
            document.getElementById('dialogbox').style.display = "none";
            }
            }`
        });

CSS：

#dialogbox{
display: none;
position: fixed;
background: red;
border-radius:7px;
width:550px;
z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF;fon-family:verdana; }
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }

Answer 1

反应方式是将对话框/警报的可见性状态存储在Session变量中，然后让模板侦听该状态并在可见性为真时显示它。例如，在显示对话框的模板中：

{{#if showDialog}}
  <div id="myDialog"><!-- dialog markup here --></div>
{{/if}}

<button id="showDialog">show dialog</button>

在模板javascript中：

Template.myTemplate.showDialog = function() {
  return Session.get('showDialog');
};

Template.myTemplate.events({
  'click #showDialog': function() {
    Session.set('showDialog', true);
  }
});

点击关闭按钮（或模式的背景）可以Session.set('showDialog',false);

警报框使用`meteor Js`？

1 个答案: