聚合物，将数组绑定到纸张滑块值的问题

Question

这是问题的示例：Plunk

更改滑块时，初始值 31 不具有约束力。 数组值 31 位于初始位置，但更改后无法重新设置。

如何正确绑定滑块到数组？

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

<link href="paper-input/paper-input.html" rel="import">
<link href="paper-slider/paper-slider.html" rel="import">
<link href="google-chart/google-chart.html" rel="import">

<dom-module id="dynamic-chart">
  <template>

    Binded values:
    <br>
    arrayItem: {{arrayItem(rows.*, 0, 1)}}
    <br>
    arrayBase: {{arrayBase(rows.*)}}

    <hr>

    Jan slider:
    <paper-slider min="1" 
                  max="31" 
                  value="{{rows.0.1}}"
                  pin
                  editable>
    </paper-slider>

  </template>
  <script>
    Polymer({
      is: 'dynamic-chart',

      properties: {
        rows: {
                type: Array,
                notify: true,
              },
      },

      //domReady:
      attached: function() {
         this.async(function() {
            this.rows=[ ["Jan", 31],["Feb", 28],["Mar", 31] ];
            console.log('domReady');
         });

      },

      // first argument is the change record for the array change,
      // change.base is the array specified in the binding
      arrayItem: function(change, index, path) {

        console.log('arrayItem');
        return this.get(path, change.base[index]);
      },

      arrayBase: function(change) {

        console.log('arrayBase');
        return change.base;
      },

    });
  </script>
</dom-module>

<dynamic-chart>
</dynamic-chart>

更新： array-selector (simple example) 元素也可以用于此任务。

Answer 1

您正在尝试将数组的第一个元素rows.0.1 绑定到纸滑块的value，这是一个常量值31。 当 arrayItem 的值发生变化时，!== 31 会通知它发生了什么。

你应该做的是像这样绑定max 值。 Plunkr

<base href="http://polygit.org/polymer+:master/components/">

<!--<base href="http://polygit.org/components/">-->

<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">

<link href="paper-input/paper-input.html" rel="import">
<link href="paper-slider/paper-slider.html" rel="import">
<link href="google-chart/google-chart.html" rel="import">


<dom-module id="dynamic-chart">
  <template>

    init value, 31, can't be binded back to arrayItem once the slider in changed:
    <br>
    <br> Binded values:
  
    <br><i>the arrayItem get notifies when its value change i.e !== 31</i>
    <br> arrayItem: {{arrayItem(rows.*, 0, 1)}}
    <br> arrayBase: {{arrayBase(rows.*)}}

  
    <h1>paper-slider 1</h1>
    <div>Rows First Element: <span>{{rows.0.1}}</span> ==> Constant value </div>
    <div>paper-slider Value: <span id="ps1Value"></span></div>
    <paper-slider min="1" max="31" pin editable value="{{rows.0.1}}" id="ps1">
    </paper-slider>

       <!-- You need  to bind the paper-slider max to the selected rows item-->
    <!-- Changing the max value to {{rows.1.1}} rows second element -->
    <h1>paper-slider 2</h1>
    <div>Rows Second  Element: <span>{{rows.1.1}}</span> ==> Constant value </div>
    <div>paper-slider Value: <span id="ps2Value"></span></div>
    <paper-slider min="1" max="{{rows.1.1}}" pin editable value="{{_value2}}" id="ps2">
    </paper-slider>



  </template>
  <script>
    Polymer({
      is: 'dynamic-chart',

      properties: {
        rows: {
          type: Array,
          notify: true,
        },       

        _value2: {
          type: Number,
          value:0,
          observer: '_value2Changed'
        }

      },
        // you can also use an obsersver instead of the addEventListener
      _value2Changed: function(val) {
        console.log("this is paper-slider #2  value "+ val);
      },

      ready: function() {
        //events for paper slider #1
        document.querySelector('#ps1').addEventListener('value-change', function(e) {
          document.querySelector('#ps1Value').textContent = e.target.value;

        });
        //events for paper slider #1
        document.querySelector('#ps2').addEventListener('value-change', function(e) {
          document.querySelector('#ps2Value').textContent = e.target.value;

        });
      },

      //domReady:
      attached: function() {
        this.async(function() {

          //init value, 31, can't be seated back once the slider in changed:
          this.rows = [
            ["Jan", 31],
            ["Feb", 28],
            ["Mar", 31]
          ];
          console.log('domReady');
          //console.log(this.rows);
        });

      },

      // first argument is the change record for the array change,
      // change.base is the array specified in the binding
      arrayItem: function(change, index, path) {

        console.log('arrayItem');
        //console.log(change);
        //console.log(index);
        //console.log(path);
        //console.log(this.get(path, change.base[index]));

        // this.get(path, root) returns a value for a path
        // relative to a root object.
   
        return this.get(path, change.base[index]);

      },


      arrayBase: function(change) {

        console.log('arrayBase');
        return change.base;
      },

    });
  </script>
</dom-module>

<dynamic-chart>
</dynamic-chart>

将行作为对象而不是对象数组会更好，这样：

    rows:{
       type: Array,
      notify: true,
      value:function(){
        return [
            {"label":"Jan", max:31},
        {"label":"Feb", max:28},
        {"label":"Mar", max:31}
          ];
      }
    },