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....
}
});

我试图在clickForm jquery中在click事件中追加html但这不起作用。例如

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

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

Answer 1

您可以创建名为showForm的会话变量，检查是否显示表单并在click事件中将其设置为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 2

您应该使用常规把手（例如{{> 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');
};

Answer 3

此代码删除未单击的类，然后使用动画呈现表单中的连接。 看起来很简单!! 我结合了来自用户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>

Meteor：jQuery渲染模板，点击动画

3 个答案: