Как показать/скрыть вид в 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. См. blog post об этом.

Answer 2

Valuebinding по некоторым причинам не работал для меня так наблюдая parentView свойство внутри childView сделал трюк для меня

Handlebar:

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