如何在 EmberJS 中显示/隐藏视图答案

【问题标题】：How to show/hide a View in EmberJS如何在 EmberJS 中显示/隐藏视图
【发布时间】：2012-05-17 22:13:47
【问题描述】：

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

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/

【问题讨论】：

你能用你的实际代码创建一个小提琴吗？您粘贴的块似乎不完整。
没有看到模板，即如何将视图放在页面上，这是无法调试的。我的建议是在click 函数中添加一些Em.Logger.log 语句（以确保它实际上被调用）并实际在视图中放置一些东西，这样它们就不仅仅是空的div。尝试编辑这个 jsFiddle：jsfiddle.net/pjmorse/uxyrw/4

标签： javascript jquery ember.js

【解决方案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。请参阅blog post。

【讨论】：

感谢您的帮助 Pangratz，另一个快速问题。如果 childView 在 {{each}} 中并且它生成了更多 childViews，我将如何将显示/隐藏切换定位到选定的特定选项？
我会创建一个CollectionView，它'itemViewClass 处理可见性的切换。见jsfiddle.net/pangratz666/ZTdPF。

【解决方案2】：

由于某些原因，Valuebinding 对我不起作用，所以观察 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'

【讨论】：