Question

给定具有两个视图的YUI应用程序，HomePageView＆amp; tradedeskPageView，我想在tradedeskview中显示数据表。 TradedeskView使用类似

的模板定义

  <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中渲染表格，例如，在这种情况下为＃my-datatable。

Answer 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;
}

您可以在视图的初始化程序中初始化DataTable，但只能在呈现View本身时呈现它

在YUI视图中显示数据表的理想方法是什么

1 个答案: