Meteor：带有点击动画的jQuery渲染模板

Question

单击 authJoinType 模板中的 .join-type-heading 类后，我想呈现（显示）joinForm 模板。此外，我正在尝试像这样为 joinForm 设置动画（查看它淡入和向上移动的方式）。 http://jsfiddle.net/blackhawx/kMxqj/13/

我应该将 joinForm 模板嵌套在 authJoin 模板中吗？

HTML：

<template name="authJoin">
{{> authJoinType}} // this template displays two boxes with labels 'publisher' and 'reader'
{{> joinForm}} // this to fade into view when either box is clicked
</template>


<template name="authJoinType">
<div class="container join-type">
   <div class="row"> 


    <div class="col-md-6">
        <a href="#">
        <div class="join-type-heading"  value="reader">Reader</div></a>
    </div> 

    <div class="col-md-6">
        <a href="#">
        <div class="join-type-heading"  value="publisher">Publisher
        </div></a>
    </div>

 </div>
</div>
</template>


<template name="joinForm">

    <div class="container">
        <div class="row-fluid">
            <div class="col-md-6">
              <div class="wrapper-auth">
                <form class="form-join">
                  <input type="text" class="form-control" id="firstName" placeholder="first name" required="" autofocus="" />
                  <input type="text" class="form-control" id="lastName" placeholder="last name" required="" autofocus="" />
                  <input type="text" class="form-control" id="email" placeholder="email address" required="" autofocus="" />
                  </form>
                </div>
           </div>
        </div>
     </div>
</template>

client.js 用于点击事件（这很好）

Template.authJoinType.events({
'click div.join-type-heading': function(e, tmpl) {
//function to go here....
}
}); 

我试图在点击事件时在 joinForm jquery 中附加 html，但这不起作用。 例如

$('#container').append('<div>....</div>');

我正在使用 mizzao:bootstrap-3 和 mizzao:jquery-ui。

Answer 1

这段代码移除了没有被点击的类，然后用动画渲染了join表单。 看起来很漂亮！！我结合了来自用户 sbking 和 user3557327 的信息。谢谢你们！唯一剩下的就是如果点击右边的 div（第二个 col-md-6）向左滑动。

client.js

Template.authJoinType.rendered = function() { //fade out non selected div
  $('div.join-type-heading').on('click',function() {
    $('.join-type-heading').not(this).each(function() {
    $(this).fadeOut('slow', function(complete){
          $('.join-form').addClass('show'); //references the .show class in css file
       });
   });
  });
};

.css

.join-form {
 margin-top: 20px;
 opacity: 0;
 position: relative;
 top: 40px;
 transition: opacity 600ms, top 400ms;
 }
.join-form.show {
 opacity: 1;
 top: 0px;
 }
.join-type-heading {
padding-top: 40px;
padding-bottom: 40px;
margin-top: 50px;
background-color: #0088cb;
text-align: center;
font-size: 30px;
color: #ffffff;
letter-spacing: 2px;
}

html:

<template name="authJoin">
{{> authJoinType}} 
{{> joinForm}} 
</template>


<template name="authJoinType">
 <div class="container join-type">
  <div class="row"> 

   <div class="col-md-6">
    <a href="#">
    <div class="join-type-heading"  value="reader">Reader</div></a>
   </div> 

   <div class="col-md-6">
    <a href="#">
    <div class="join-type-heading"  value="publisher">Publisher</div></a>
   </div>

  </div>
 </div>
</template>


<template name="joinForm">
 <div class="container join-form"> //.join-form class is added when div in authJoinType is clicked and other div fades out.
    <div class="row-fluid">
        <div class="col-md-6">
          <div class="wrapper-auth">
            <form class="form-join">
              <input type="text" class="form-control" id="firstName" placeholder="first name" required="" autofocus="" />
              <input type="text" class="form-control" id="lastName" placeholder="last name" required="" autofocus="" />
              <input type="text" class="form-control" id="email" placeholder="email address" required="" autofocus="" />
              </form>
            </div>
       </div>
    </div>
 </div>
</template>

Answer 2

您可以创建一个名为showForm的会话变量，检查是否显示表单并在点击事件上将其设置为true：

<template name="authJoin">
    {{> authJoinType}}
    {{#if showForm }}
        {{> joinForm}}
    {{/if}}
</template>

Template.authJoin.helpers({
    showForm: function() {
        return Session.equals('showForm', true);
    }
});

Template.authJoinType.events({
    'click div.join-type-heading': function(e, tmpl) {
        Session.set('showForm', true);
    }
}); 

我不确定动画部分，但可能在渲染函数中执行与您的示例相同的操作：

Template.joinForm.rendered = function() {
    $(this.firstNode).animate({opacity: 1, top:0}, 1000);
}

Answer 3

您应该使用包含{{> joinForm}} 之类的常规句柄来渲染模板，并将动画放在动画模板的渲染回调中：

Template.joinForm.rendered = function() {
  var container = this.$('.container');
  container.css({
    opacity: 0,
    position: 'relative'
    top: 20
  }).animate({
    opacity: 1,
    top: 0
  }, 500);
};

请注意，您还可以通过 CSS 处理动画，这通常是更好的选择。例如，如果将类 join-form 添加到容器中：

.join-form {
  opacity: 0;
  position: relative;
  top: 20px;
  transition: opacity 500ms, top 500ms;
}

.join-form.show {
  opacity: 1;
  top: 0
}

Template.joinForm.rendered = function() {
  this.$('.join-form').toggleClass('show');
};