3

我正在运行 Meteor 0.5.7,并尝试在用户单击提交时显示引导警报消息。

客户端.js

Handlebars.registerHelper('isSuccessful',function(input){
  return Session.get("success");
});    

Template.form.events({
  'click .submit' : function (event, template) {
     if (condition) {
        Session.set("success", true);
        // hide warning, show success
        $('#valid_form').show();
        $('#invalid_form').hide();
     } else {
        Session.set("success", false);
        // hide success, show warning
        $('#valid_form').hide();
        $('#invalid_form').show();
     }
  } 
});

Template.form.rendered = function () { $('.alert').hide();};

page.html

<body>
   {{> page}}
</body>

<template name='page'>
  {{> form}}
</template>

<template name='form'>
   <!-- Show Alerts Above Form -->
   <div class="alert alert-success" id="valid_form">..</div>
   <div class="alert" id="invalid_form">..</div>

   {{#if isSuccessful}}
     <div>SHOW CONFIRMATION PAGE</div>
   {{else}}
    <div>SHOW INPUT FIELDS</div>
   {{/if}}
   <div>   
</template>

当用户最初点击提交并且不满足条件时,他们必须再次点击提交才能获得警告消息。所有其他时间逻辑都有效。

我看过这个 - Meteor 的反应在幕后是如何工作的?,并重新阅读有关响应式编程部分的 Meteor 文档,但仍有一些问题。

客户端中的 else 语句不应该默认为成功 == false 的会话变量,并且车把模板会立即在 {{else}} 块中拾取它吗?有点糊涂。谢谢,

4

2 回答 2

3

我的问题的答案似乎是在车把注册助手中将 return Session.get("success") 更改为 return Session.equals("success",true) 可以解决问题。从我正在阅读的内容来看,它的“失效”较少?- 不知道那是什么意思atm,但这是一个开始!

于 2013-03-12T05:15:38.530 回答
2

如果您的目的是隐藏/显示某个条件的相关警报,您可以这样做:

客户端.js

Template.form.rendered = function() {
  // hide all alerts when elements are rendered
  $('.alert').alert('hide');
}

Template.form.events({
  'click .submit' : function (event, template) {
    if (condition) {
      // hide warning, show success
      $('#valid_form').alert();
      $('#invalid_form').alert('hide');
    } else {
      // hide success, show warning
      $('#valid_form').alert('hide');
      $('#invalid_form').alert();
    } 
  } 
});

page.html

<body>
  {{> page}}
</body>

<template name='page'>
  {{> form}}
</template>

<template name='form'>
  <div class="alert alert-success" id="valid_form">..</div>
  <div class="alert" id="invalid_form">..</div>
</template>
于 2013-03-11T20:03:43.153 回答