Cách hiển thị/ẩn Chế độ xem trong EmberJS

Question

Tôi muốn Chế độ xem bị ẩn khi tải, khi người dùng nhấp vào liên kết, nó sẽ hiển thị chế độ xem. Ai đó có thể xem lại mã của tôi và cho tôi biết những gì tôi đã làm sai?

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

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

Đây là jsfiddle: http://jsfiddle.net/stevenng/uxyrw/5/

Answer 1

tôi sẽ tạo ra một đơn giản isVisibleBinding để xem bạn muốn ẩn/hiển thị, xem http://jsfiddle.net/pangratz666/dTV6q/:

tay lái:

<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(); 

---

Một lưu ý về quy ước đặt tên của bạn: lớp học nên được đặt tên UpperCase và trường lowerCase. Xem blog post về việc này.

Answer 2

Valuebinding đối với một số lý do công việc didnt cho tôi để quan sát tài sản parentView bên childView đã làm các trick cho tôi

tay lái:

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