Ember.js-操纵杆变化动画

Question

我正在车把模板（在Ember.js中）中使用｛｛if｝｝语句，目前已经设置好了，所以如果foo为true，就会显示一个表单。

我有一个按钮，它可以切换foo的值并隐藏/显示窗体。这是用｛｛action｝｝属性完成的。

我想做的是将这个变化动画化。如果可能的话，如何使用当前设置来完成此操作？

注意：我可以使用fadeIn/fadeOut（jQuery）。

Answer 1

查看液体火（请参阅：https://github.com/ef4/liquid-fire)。我个人还没有使用它，但这些例子看起来很有希望。特别是这个表单示例看起来与您想要的类似：http://ef4.github.io/ember-animation-demo/#/animated-if演示来源在下一张幻灯片上：http://ef4.github.io/ember-animation-demo/#/animated-如果源

Answer 2

您可以这样做：

在车把文件中：

<script type="text/x-handlebars" data-template-name="newPost">
     <p> Template for New Post </p>
     <div class="errorMsg">
         <p>Error Message</p>
     </div>
</script>

在该视图中，您可以使用操作设置触发器，并使用消息错误隐藏div

App.NewPostView = Ember.View.extend({
    showError: function() {
        $('.errorMsg').fadeToggle("slow");
    },
    didInsertElement : function(){
        $('.errorMsg').hide();
        this.get('controller').on('showError', this, this.showError);
    },
    willClearRender: function()
    {
      this.get('controller').off('showError', this, this.showError);
    }
});

最后，在控制器中，这必须扩展到Ember.Evented，当你想显示消息错误时，你必须调用this.trigger错误。

App.NewPostController = Ember.ObjectController.extend(Ember.Evented,{
    actions:{
         // This an example the method that verify and show error after validating
         addNewPost: function(post){
             if(post.get('name') === 'valid'){
                  //do your business                       
             }else{
                  //this will show the message error
                  this.trigger('showError');
             }
         }
    }
})

当你想隐藏消息错误时，你必须再次调用this.trigger（"showError"），这会隐藏消息，你可以将其与其他效果一起使用。