Question

我在把手模板中使用{{if}}语句（在Ember.js中）并且当前已设置它，所以如果 foo 为真，则会显示一个表单。

我有一个按钮可以切换 foo 的值并隐藏/显示表单。这是通过{{action}}属性完成的。

我想做的是为此更改动画。如果可能，我该如何使用当前设置执行此操作？

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

Answer 1

看一下Liquid Fire（参见：https://github.com/ef4/liquid-fire）。我个人还没有使用它，但这些例子看起来很有希望。特别是这个表单示例看起来与您想要的类似：http://ef4.github.io/ember-animation-demo/#/animated-if-demo 资料来自下一张幻灯片：http://ef4.github.io/ember-animation-demo/#/animated-if-source

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（＆＃39; showError＆＃39;）并隐藏消息，您可以将其与其他效果一起使用。

Ember.js - Animate Handlebars Change

2 个答案: