2014-09-25 64 views
0

給定一個帶有兩個視圖的YUI應用程序,HomePageView & tradedeskPageView,我想要在tradedeskview中顯示一個數據表。 TradedeskView用模板等規定,什麼是在YUI視圖內顯示數據表的理想方式

<script id="t-tradedesk" type="text/x-handlebars-template"> 
    <div id="my-datatable"></div> 
    </script> 

而且示意圖如下定義,

YUI().add('tradedeskPageView', function(Y) { 

Y.TradedeskPageView = Y.Base.create('tradedeskPageView', Y.View, [], { 
    // Compiles the tradedeskTemplate into a reusable Handlebars template. 
    template: Y.Handlebars.compile(Y.one('#t-tradedesk').getHTML()), 

    initializer: function() { 
     var cols = [ 
      { key: 'id', label: 'ID' }, 
      { key: 'name', label: 'Name' } 
     ]; 

     var data = [ 
      { id: 12345, name: 'Srikanth'}, 
      { id: 12346, name: 'Aditya'} 
     ]; 
     this.table = new Y.DataTable({ 
      columns: cols, 
      data: data 
     }); 

     //this.table.render('#my-datatable'); This is not possible as view is not rendered and node with given id wont exist 
    }, 

    render: function() { 
     var content = this.template();   
     this.get('container').setHTML(content); 
     return this; 
    } 
}); 
}, '1.0.0', { 
    requires: [] 
}); 

我應該如何渲染所需的DIV即#我-數據表的表在這種情況下。

回答

1

給這個一展身手:

render: function() { 
    var content = this.template(), 
     container = this.get('container'); 

    container.setHTML(content); 
    this.table.render(container.one('#my-datatable')); //node exists at this point 
    return this; 
} 

您可以初始化在你視圖的初始化數據表,但只有使其在視圖本身呈現

+0

是的,它的工作。 Thnq !!! – Srikanth 2014-09-29 10:26:04

相關問題