如何在EmberJS中顯示/隱藏視圖

我希望視圖在加載時隱藏，然後當用戶單擊鏈接時，它將顯示視圖。有人可以查看我的代碼並讓我知道我做錯了什麼嗎？如何在EmberJS中顯示/隱藏視圖

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/

來源

2012-05-17 Steve

莫非你用你的實際代碼創建一個小提琴？你粘貼的塊似乎不完整。 –

沒有看到模板，即視圖如何放在頁面上，這是無法調試的。我的建議是在'click'函數中添加一些'Em.Logger.log'語句（以確保它實際被調用），並在視圖中添加一些東西，使它們不僅僅是空的div。嘗試編輯此jsFiddle：http://jsfiddle.net/pjmorse/uxyrw/4/ – pjmorse

我想創建一個簡單的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。

來源

2012-05-29 18:56:15 pangratz

感謝您的幫助Pangratz，另一個快速問題。如果childView在{{each}}中，並且它生成了更多的childViews，我將如何將show/hide切換到所選的特定選項？ – Steve

我會創建一個'CollectionView'，其中''itemViewClass'處理可見性的切換。見http://jsfiddle.net/pangratz666/ZTdPF/。 – pangratz

-1

爲的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>

的CoffeeScript：

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

來源

2014-11-20 07:49:02 Abhaya

如何在EmberJS中顯示/隱藏視圖

回答

相關問題