对象内的聚合物功能答案

【问题标题】：Polymer function within object对象内的聚合物功能
【发布时间】：2015-09-23 12:49:46
【问题描述】：

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

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

我的问题是我无法使用样式功能。我认为这是一个范围界定问题，但我无法弄清楚。我知道这些函数本身就像我刚刚将值设置为属性时一样工作，但是现在我已经创建了一个数组，但我一无所获。

  <template is="dom-repeat" items="{{titles}}">
    <div class="titleInputContain">
      <input value="{{item.title::input}}">
      <paper-slider min="10" max="200" value="{{item.fontSize}}" editable></paper-slider>
      <paper-slider min="0" max="200" value="{{item.lineHeight}}" editable></paper-slider>
    </div>
  </template>
    <div class="titleBlock">
      <div class="titleText">
        <template is="dom-repeat" items="{{titles}}">
          <p class="titleHeader" style$="{{item.styling}}">{{item.title}}</p>
        </template>
    </div>
  </template>

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

      Polymer({
        is: 'l3-cover',
        ready: function() {
          this.titles = [
            {
              title: 'THIS IS A',
              fontSize: '98',
              lineHeight: '70',
              fontSizeComputed: {
                type: String,
                computed: 'generateStyle("font-size", fontSize, "px")'
              },
              lineHeightComputed: {
                computed: 'generateStyle("line-height", lineHeight, "%")'
              },
              styling: {
                type: String,
                computed: 'this.combineStyles(fontSizeComputed, lineHeightComputed)'
              }
            },
            {
              title: 'STANDARD COVER',
              fontSize: '98',
              lineHeight: '70',
              fontSizeComputed: {
                computed: 'generateStyle("font-size", fontSize, "px")'
              },
              lineHeightComputed: {
                computed: 'generateStyle("line-height", lineHeight, "%")'
              },
              styling: {
                computed: 'combineStyles(fontSizeComputed, lineHeightComputed)'
              }
            }
          ]
        },
        generateStyle: function(type, size, value) {
          return type + ':' + size + value + ';';
        },
        combineStyles: function(size, lineheight) {
          return size + lineheight;
        }
      });
    })();
  </script>

【问题讨论】：

标签： javascript html function scope polymer

【解决方案1】：

好的，我找到了答案。

基本上，您可以将功能作为 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>

【讨论】：