javascript - 如何在 EmberJS 中显示/隐藏视图

Question

我希望在加载时隐藏视图，然后当用户单击链接时，它将显示视图。有人可以查看我的代码并让我知道我做错了什么吗？

App.parentView = Em.View.extend({   
  click: function() {
    App.childView.set('isVisible', true);
  }
});

App.childView = Em.View.extend({
  isVisible: false
});

这是jsfiddle：http: //jsfiddle.net/stevenng/uxyrw/5/

Answer 1

我会isVisibleBinding为您想要隐藏/显示的视图创建一个简单的视图，请参阅 http://jsfiddle.net/pangratz666/dTV6q/：

车把：

<script type="text/x-handlebars" >
    {{#view App.ParentView}}
        <h1>Parent</h1>
        <div>
            <a href="#" {{action "toggle"}}>hide/show</a>
        </div>     
        {{#view App.ChildView isVisibleBinding="isChildVisible" }}
            {{view Em.TextArea rows="2" cols="20"}}
        {{/view}}        
    {{/view}}
</script>​

JavaScript：

App.ParentView = Em.View.extend({   
    isChildVisible: true,

    toggle: function(){
        this.toggleProperty('isChildVisible');
    }
});

App.ChildView = Ember.View.extend();

---

关于命名约定的注意事项：应命名类UpperCase和实例lowerCase。请参阅有关此的博客文章。

​</p>

Answer 2

由于某些原因，值绑定对我不起作用，所以观察 childView 中的 parentView 属性对我来说是诀窍

车把：

<script type="text/x-handlebars" >
    {{#view App.ParentView}}
        <h1>Parent</h1>
        <div>
            <a href="#" {{action "toggle"}}>hide/show</a>
        </div>     
        {{#view App.ChildView }}
            {{view Em.TextArea rows="2" cols="20"}}
        {{/view}}        
    {{/view}}
</script>​

咖啡脚本：

App.ParentView = Em.View.extend
  isChildVisible: true
  toggle: ->
    @toggleProperty 'isChildVisible'
App.ChildView = Em.View.extend
  isVisible: (->
    @get('parentView.isChildVisible')
  ).property '_parentView.isChildVisible'