Question

我尝试在paper-datatable中设置自定义行样式。 demo

这是有效的代码：

<!doctype html>
<html>
    <head>
        <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="bower_components/paper-datatable/paper-datatable.html">
    </head>
    <body>
        <template is="dom-bind" id="app">
            <paper-datatable data="{{data}}"  custom-row-style="{{generateRowCss}}" >
                <paper-datatable-column header="Calories" property="calories"></paper-datatable-column>
            </paper-datatable>
        </template>     
        <script>
            var app = document.querySelector('#app');
            app.data = [
                {id: 0, title: 'Frozen yogurt', calories: 159},
                {id: 0, title: 'Frozen yogurt', calories: 159}
            ];
            app.generateRowCss = function(item){
                return 'background:red;';
            };
        </script>
    </body>
</html>

generateRowCss是属性，而不是函数

如果我尝试在我的模块中插入：

var app2 = document.querySelector('#idModule');
or var app2 = document.getElementById('idModule');
app2.generateRowCss = function(item){return 'background:red;';};

app2返回null

对我来说最好的方法 - 使用聚合物的特性：

Polymer({
    is: 'idModule',
    properties: {
      generateRowCss: {
        type: String,
        value: "background:red;"
or function(item){return 'background:red;';}
or computed: '_generateRowCss(item)'  
      },

然而，这会导致聚合物模块出错：未捕获的TypeError：this.customRowStyle不是函数。

聚合物定制行式纸张数据表

0 个答案: