Polymer.js 输入范围的默认参数

Question

我正在尝试将 Polymer.js 与 input[type="range"] 结合使用，以将范围滑块的当前值绑定到关联的 <output> 元素中。除了我在 input 中的默认输入值外，一切正常。 DOM 中没有显示值参数，我的范围滑块设置为零，如下所示：

初始加载

幻灯片事件后

在输入 update/slide 滑块后，预期值绑定到 <output>，如下所示。

模板

<dom-module id="item-selection">
  <link rel="stylesheet" href="item-selection.scss" />
  <template>
    <template is="dom-repeat" items="{{sliders}}">
      <div class="slider-group">
        <label>{{item.name}}</label>
        <output>{{item.initialValue}}</output>
        <input type="range"
          min="{{item.minValue}}"
          max="{{item.maxValue}}"
          value="{{item.initialValue::input}}"
          id="{{item.id}}"
          step="1"
        >
      </div>
    </template>
    <a href="#" class="button">Button Text</a>
  </template>

  <script src="item-selection.js"></script>
</dom-module>

JS:

Polymer({
  is: "item-selection",
  ready: function() {
    this.sliders = [
      {
        name: "item-one",
        id: "item-one-id",
        initialValue: 175,
        minValue: 100,
        maxValue: 200
      },
      {
        name: "item-two",
        id: "item-one-id",
        initialValue: 175,
        minValue: 100,
        maxValue: 281
      },
      {
        name: "item-three",
        id: "item-one-id",
        initialValue: 150,
        minValue: 100,
        maxValue: 200
      }
    ]
  }
});

DOM 检查

<div class="slider-group style-scope item-selection">
  <label class="style-scope item-selection">item-two</label>
  <output class="style-scope item-selection">175</outpute>
  <input type="range" step="1" 
    class="style-scope item-selection" 
    id="item-one-id" 
    max="281" min="100">
</div>
...

有没有办法设置默认值并允许对输入元素进行数据绑定？我查看了 https://www.polymer-project.org/1.0/docs/devguide/data-binding 看是否可以找到解决方案，但对我来说似乎没有什么显而易见的。

Answer 1

UPDATE 如您所见，max 和 value 绑定的顺序会更改 <input> 的值是否已初始化（这因浏览器而异）。我已经为这个 Polymer bug 创建了一个 GitHub issue。

您可以考虑改用 <paper-slider>，它在任何浏览器中都不会出现此问题：

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-slider/paper-slider.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
    <template is="dom-repeat" items="{{sliders}}">
      <div class="slider-group">
        <label>{{item.name}}</label>
        <output>{{item.initialValue}}</output>
        <paper-slider
               min="{{item.minValue}}"
               max="{{item.maxValue}}"
               value="{{item.initialValue}}"
               step="1"></paper-slider>
      </div>
    </template>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties : {
            sliders: {
              type: Array,
              value: function() {
                return [
                  {
                    name: "item-one",
                    id: "item-one-id",
                    initialValue: 120,
                    minValue: 100,
                    maxValue: 200
                  },
                  {
                    name: "item-two",
                    id: "item-one-id",
                    initialValue: 175,
                    minValue: 100,
                    maxValue: 200
                  },
                  {
                    name: "item-three",
                    id: "item-one-id",
                    initialValue: 150,
                    minValue: 100,
                    maxValue: 200
                  }
                ];
              }
            }
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

绑定 max 似乎是由于某种原因引起的问题。删除 max 绑定并对其进行硬编码允许初始值生效，如下面的演示所示。

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
    <template is="dom-repeat" items="{{sliders}}">
      <div class="slider-group">
        <label>{{item.name}}</label>
        <output>{{item.initialValue}}</output>
        <input type="range"
               min="{{item.minValue}}"
               max="200"
               value="{{item.initialValue::input}}"
               step="1">
      </div>
    </template>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties : {
            sliders: {
              type: Array,
              value: function() {
                return [
                  {
                    name: "item-one",
                    id: "item-one-id",
                    initialValue: 120,
                    minValue: 100,
                    maxValue: 200
                  },
                  {
                    name: "item-two",
                    id: "item-one-id",
                    initialValue: 175,
                    minValue: 100,
                    maxValue: 200
                  },
                  {
                    name: "item-three",
                    id: "item-one-id",
                    initialValue: 150,
                    minValue: 100,
                    maxValue: 200
                  }
                ];
              }
            }
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

Answer 2

@tony19 - 感谢您的反馈。事实证明，只需将 max 放在 value 之后即可。

<input type="range"
  min="{{item.minValue}}"
  value="{{item.initialValue::input}}"
  max="{{item.maxValue}}"
  id="{{item.id}}"
  step="1"
>

Polymer.js 输入范围的默认参数

Default Param on Polymer.js Input Range

javascript

data-binding

polymer

polymer-1.0