EmberJSでビューを表示/非表示にする方法

Question

読み込み時に表示を非表示にしたい場合、ユーザーがリンクをクリックすると表示されます。誰かが私のコードを見直して、私が間違ったことを教えてもらえますか？ 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>​ 

ここ

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

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

はjsfiddleです

JavaScript：あなたの命名規則について

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

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

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

---

注：クラスはUpperCaseとインスタンスlowerCaseを命名する必要があります。これについてはblog postを参照してください。そうchildView内parentViewプロパティを観察する私のためにいくつかの理由のdidntの仕事のためにValuebinding

Answer 2

は私のためにトリックをした

ハンドルバー：

<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>​ 

のCoffeeScript：

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