聚合物：简单数据绑定在第二个元素中不起作用

Question

我已经在这个问题上工作了6个小时，但似乎看不到它。 因此，这是index.html中的代码段：

<flat-data-array availableModes="{{modes}}" id="dataArray"></flat-data-array>
<flat-strip-view availableModes="{{modes}}"   id="flatViewer"></flat-strip-view>

dataArray（始终可以正常工作）：

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="flat-data-array">

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

      Polymer({
        is: 'flat-data-array',
        properties: {
          strips: {
            type: Array,
            notify: true, 
            observe: '_stripsChanged'
          },
          availableModes: {
            type: Number,
            notify: true, 
            observe: '_modesChanged'
          },
          socket: {
            type: Object
          }
        }
        ,

        _stripsChanged: function(newVal, oldVal) {
          this.fire('flat-strip-array-changed',{ newValue: newVal, oldValalue: oldVal});
        },
        _modesChanged: function(newVal, oldVal) {
          this.fire('flat-strip-mode-changed',{ newValue: newVal, oldValalue: oldVal});
          alert("Changed");
        },
        ready: function() {
          this.socket = io.connect('http://192.168.0.101:3000');
          socket.on('flatCommand', function(data) {
            console.log(data);
          });
          this.availableModes=15;
          /*[
      {
        modeID: 65,
        letter: "A",
        name: "Singler Color"
      }
      ];*/

        }


      });

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

现在的问题是：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../elements/flat-list/flat-list.html">

<dom-module id="flat-strip-view">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
      <flat-list 
        strips="{{strips}}"

        id="flatList"
        >

      </flat-list>
   </template>

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

      Polymer({
        is: 'flat-strip-view',
        properties: {
          strips: {
            type: Array,
            notify: true,
            observer: '_flatStripChanged'
          },
          availableModes: {
            type: Number,
            notify: false,
            observer: '_flatModeChanged'
          }
        }
        ,
        _flatModeChanged: function(newVal, oldVal) {
          this.fire('flat-strip-view-mode-changed',{ newValue: newVal, oldValalue: oldVal});
          alert("Event");
        },
        _flatStripChanged(newVal, oldVal) {
          this.fire('flat-strip-view-array-changed',{ newValue: newVal, oldValalue: oldVal});
        }

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

由于index.html中的定义，我希望availableModes在两个元素中都相同。 但是如果我输入： documtent.getElementById('dataArray').availableModes我得到15（完全可以），但是当我输入document.getElementById('flatViewer').availableModes它说undefined奇怪的是，以相同的方式有另一个定义之前（实际上我只是将其删除以跟踪问题），并且可以正常工作并将值传递到该隐患的最后一个元素。 我只是看不到任何区别。

<aiur-data-array strips="{{mystrips}}" availableModes="{{modes}}" id="dataArray"></aiur-data-array>
              <aiur-strip-view availableModes="{{modes}}" strips="{{mystrips}}"  id="aiurViewer"></aiur-strip-view>

对于任何元素的任何方向都适用于“条” ...

Answer 1

将属性availableModes更改为available-modes 。

将属性名称映射到属性名称时：

• 属性名称将转换为小写的属性名称。 例如，属性firstName映射到firstname 。

• 通过在每个破折号后面使用大写字母，然后删除破折号，将带有破折号的属性名称转换为camelCase属性名称。 例如， 属性first-name映射到firstName 。

来源： https ://www.polymer-project.org/1.0/docs/devguide/properties.html#property-name-mapping