Question

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

初始加载

幻灯片事件后

更新/滑动输入上的滑块后，预期值将绑定到<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

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

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

＆＃13;

<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>

＆＃13;

^codepen

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

＆＃13;

<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>

＆＃13;

^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输入范围的默认参数

2 个答案: