聚合物，带有绑定数组的纸张滑块值 [英] Polymer, issue with binding array to paper slider value

问题描述

以下是问题的示例： Plunk

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

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

  base href =http://polygit.org/polymer+:master/components/> 
< script src =webcomponentsjs / webcomponents-lite.min.js>< / script> 
< link href =polymer / polymer.html =import> 
 
< link href =paper-input / paper-input.html =import> 
< link href =paper-slider / paper-slider.html =import> 
< link href =google-chart / google-chart.html =import> 
 
< dom-module id =dynamic-chart> 
< template> 
 
绑定值：
< br> 
 arrayItem：{{arrayItem（rows。*，0，1）}} 
< br> 
 arrayBase：{{arrayBase（rows。*）}} 
 
< hr> 
 
 Jan滑块：
< paper-slider min =1
 max =31
 value ={{rows.0.1}} 
 pin 
可编辑> 
< / paper-slider> 
 
< / template> 
< script> 
聚合物（{
是：'动态图表'，
 
属性：{
行：{
类型：数组，
通知：
}，
}，
 
 // domReady：
附加：function（）{
 this.async（function（）{
 this.rows = [[Jan，31]，[Feb，28]，[Mar，31]]; 
 console.log（'domReady'）; 
 }）; 
 
}，
 
 //第一个参数是数组更改的更改记录，
 // change.base是绑定中指定的数组
 arrayItem：function（change，index，path）{
 
 console.log（'arrayItem'）; 
返回this.get（path，change.base [index]） ; 
}，
 
 arrayBase：function（change）{
 
 console.log（'arrayBase'）; 
 return change.base; 
}，
 
}）; 
< / script> 
< / dom-module> 
 
<动态图> 
< / dynamic-chart> 
  

更新：
array-selector （

解决方案

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





你应该做的是绑定这样的 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.htmlrel =import> < link href =paper-input / paper-input.html =import>< link href =paper-slider / paper-slider.html =import>< link href =google-chart / google-chart.html =import>< dom-module id =dynamic-chart> < template> init值，31，不能绑定回到arrayItem一旦更改的滑块：< br> < br>绑定的值：< br>< i> arrayItem在其值改变时通知，即！== 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> ==>常数值< / div> < div> paper-slider值：< span id =ps1Value>< / span>< / div> < paper-slider min =1max =31pin可编辑值={{rows.0.1}}id =ps1> < / paper-slider> <！ - 您需要将纸张滑块最大值绑定到所选的行项目 - > <！ - 将最大值更改为{{rows.1.1}}行第二个元素 - > < h1>纸 - 滑块2< / h1> < div> Rows Second Element：< span> {{rows.1.1}}< / span> ==>常数值< / div> < div> paper-slider值：< span id =ps2Value>< / span>< / div> < paper-slider min =1max ={{rows.1.1}}可编辑值={{_2}}id =ps2> < / paper-slider> < / template> < script>聚合物（{is：'dynamic-chart'，properties：{rows：{type：Array，notify：true，}，_value2：{type：Number，value：0，observer：'_value2Changed'}} //还使用observer而不是addEventListener _value2Changed：function（val）{console.log（this is paper-slider＃2 value+ val）;}，ready：function（）{//纸张滑块＃1文档的事件.querySelector（'＃ps1'）。addEventListener（'value-change'，function（e）{document.querySelector（'＃ps1Value'）。textContent = e.target.value;}）; //纸张滑块＃ 1 document.querySelector（'＃ps2'）。addEventListener（'value-change'，function（e）{document.querySelector（'＃ps2Value'）。textContent = e.target.value;}）;}，// domReady ：attached：function（）{this.async（function（）{// init value，3 1，滑块更改后无法就座：this.rows = [[Jan，31]，[Feb，28]，[Mar，31]]; console.log（'domReady'）; //console.log(this.rows）; }）; }，//第一个参数是数组更改的更改记录，// change.base是绑定数组中指定的数组：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）返回相对于根对象的路径的值。 return this.get（path，change.base [index]）; }，arrayBase：function（change）{console.log（'arrayBase'）;返回change.base; }，}）; < / script>< / dom-module>< dynamic-chart>< / dynamic-chart>  

最好将行作为对象而不是Array对象，这样：

  rows：{
 type：Array，
 notify：true，
 value：function（）{
 return [
 {label Jan，max：31}，
 {label：Feb，max：28}，
 {label：Mar，max：31} 
]; 
} 
}，
  

Here is example of the issue: Plunk

The initial value, 31, is not binding when changing the slider. Array value 31 is seated on the initiation, but can not be reseated after change.

How to properly bind slider to the array?

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

Update: array-selector (simple example) element can be used for this task too.

解决方案

You are trying to bind your array first element rows.0.1 which is a constant value, 31 to the value of the paper-slider. What is happening that the arrayItem get notifies when its value change i.e !== 31.

What you should do is to bind the max value like this. 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>

It will be better to have your rows as object instead of Array of objects,this way:

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

这篇关于聚合物，带有绑定数组的纸张滑块值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！