2012-04-27 130 views
1

我想用它自己的模板和CSS來構建一個可重用的彈出視圖。在這個可重用的視圖中,我希望能夠顯示具有父視圖想要在彈出框中放置的內容的子視圖。如何傳遞視圖對象以在子視圖中呈現?

的彈出式車把模板看起來是這樣的:

<div class='popup'> 
    <a class='open' href='#' {{action toggleVisible}}> 
     {{view button}} 
    </a> 

    <div class='collapse'> 
     <div class='box'> 
      <div class='arrow'></div> 
      <div class='arrow-border'></div> 

      {{view content}} 

     </div> 
    </div> 
</div> 

在此背景下,buttoncontent應該是得到渲染這個彈出裏面灰燼的意見和這些意見將根據看法是什麼父母是不同的創建並顯示彈出窗口。

彈出View對象是這樣的:

var popup = Ember.View.extend({ 
    button: null, 
    content: null, 
    templateName: 'popbox', 
    visible: false, 
    toggleVisible: function() { 
     var visible = this.get('visible'); 
     this.set('visible', !visible); 
     if (visible) { 
      this.$().find('.box').fadeOut(250); 
     } else { 
      var pop = this.$().find('.popbox'); 
      var box = this.$().find('.box'); 
       box.css({ 
        'display': 'block', 
        'top': 10, 
        'left': ((pop.parent().width()/2) -box.width()/2) 
        }); 
      } 
     } 
    } 
})); 

我不知道如何通過從父視圖彈出要呈現的模板。現在我正在嘗試做這樣的事情,但它不起作用。

var sendto = Ember.View.extend({ 
    templateName: 'sendto', 
    popupView: popup.extend({ 
     button: Ember.View.extend({ 
      template: Ember.Handlebars.compile('{{model.selectedRecipients.length}} {{model.peopleOrPersonText}}')}), 
     content: Ember.View.extend({template: Ember.Handlebars.compile('Test content')}) 
    }) 
})); 

將視圖傳遞到彈出視圖的正確方法是什麼?

注:這似乎是工作,但它會產生一個廢棄的錯誤消息:

Something you did caused a view to re-render after it rendered but before it was inserted into the DOM. 

UPDATE:原來,我的問題是由於完全是另一回事(是意外包括Ember.js兩次)。上面的代碼似乎工作得很好。

回答

0

使用Ember.ContainerView,並使每個內部視圖都是各自的視圖類,並擁有自己的模板。然後,您可以將包含視圖的childViews數組設置爲包含要顯示的任何視圖的實例。