行的聚合物，纸数据表样式

Question

我正在尝试为纸张数据行着色table 使用属性 customRowStyle

这个 Plunk of paper-datatable 有效，行是彩色的，但它没有作为单独的 Polymer 元素包含。

我需要在单独的元素中包含纸张数据table。

需要一些帮助来解决这个问题：如何让 customRowStyle(item) 在 table 上被调用渲染并传递 item?

 <paper-datatable data="{{data}}" 
                         custom-row-style="{{generateRowCss}}"
                         on-row-tap="row_tap">

            <paper-datatable-column header="title" property="title"></paper-datatable-column>
            <paper-datatable-column header="Calories" property="calories"></paper-datatable-column>
            <paper-datatable-column header="Fat (g)" property="fat" ></paper-datatable-column>

</paper-datatable>

...

generateRowCss: function (item) {
                console.log('theming_2 generateRowCss:');
                var levels = ['#FFFFFF', '#FFEBEE', '#FFCDD2', '#EF9A9A'];
                var min = 150;
                var max = 450;
                var level = Math.floor((item.calories - min) / (max - min) * levels.length);
                return 'background:' + levels[level] + ';';
},

编辑： Plunk 使用@a1626 解决方案。

Answer 1

因为传递给 customRowStyle 的 generateRowCss 是一个函数而不是函数的 return 值（这是您的代码传递的值），您必须这样做像这样的东西。而不是创建一个函数 generateRowCss 创建一个具有相同名称的属性，将其初始化为 Object 并且 return 它的值作为整个函数

properties: {
            data: {
                type: Array,
                notify: true,
                value: [
                    {id: 0, title: 'Frozen yogurt', calories: 159, fat: 6},
                    {id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9},
                    {id: 2, title: 'Eclair', calories: 262, fat: 16},
                    {id: 3, title: 'Cupcake', calories: 305, fat: 3.7},
                ],
    },
    generateRowCss:{
      type:Object, //this is optional you can skip this also
      value:function(){
        return function(item){
                        console.log('app.generateRowCss');
                        console.log(item);
            var levels = ['#FFFFFF', '#FFEBEE', '#FFCDD2', '#EF9A9A'];
            var min = 150;
            var max = 450;
            var level = Math.floor((item.calories - min)/(max-min)*levels.length);
                        console.log(level);
                        console.log('background:'+levels[level]+';');
            return 'background:'+levels[level]+';';
        }  
      }

    }
  },

上面粘贴的是自定义元素的 properties。这是工作 plunkr

行的聚合物，纸数据表样式

Polymer, paper-datatable styling of rows

styling

polymer

polymer-1.0