2014-09-25 31 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

相关问题