对象内的聚合函数

时间:2015-09-23 12:49:47

标签: javascript html function scope polymer

我遇到了尝试让函数在Polymer中的数组对象中工作的问题。

该数组包含2个对象,这些对象具有标题,字体大小和行高等属性。然后将这些对象放入DOM中,并且大小和行高度值由范围滑块控制。

我的问题是我无法使样式功能起作用。我认为这是一个范围问题,但我无法弄清楚。我知道当我将值设置为属性时,函数本身就像我让它们一样工作,但是现在我已经创建了一个数组,我只是无处可去。

jsFiddle

prototype

1 个答案:

答案 0 :(得分:0)

好的,我找到了答案。

基本上,您可以将该函数作为DOM中的数据绑定。

JSFiddle

     <template is="dom-repeat" items="{{titles}}">
       <p class="titleHeader" style$="{{generateStyle('font-size', item.fontSize, 'px', 'line-height', item.lineHeight, '%')}}">{{item.title}}</p>
     </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'l3-cover',
        ready: function() {
          this.titles = [
            {
              title: 'THIS IS A',
              fontSize: '98',
              lineHeight: '80'
            },
            {
              title: 'STANDARD COVER',
              fontSize: '50',
              lineHeight: '100'
            }
          ];
        },
        generateStyle: function(type1, size1, value1, type2, size2, value2) {
          return type1 + ':' + size1 + value1 + ';' + type2 + ':' + size2 + value2 + ';';
        }
      });
    })();
  </script>