聚合物:与简单数据绑定相比;t在第二个元素中起作用

我已经为这个问题工作了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中的定义，我希望两个元素中的可用模式相同。但如果我键入：documtent.getElementById('dataArray').availableModes我得了15分（完全可以），但当我打字时document.getElementById('flatViewer').availableModes上面写着undefined奇怪的是，之前也以同样的方式有了另一个定义（事实上，我只是为了追踪问题而删除了它），这起到了作用，并将值传递给了cain中的最后一个元素。我就是看不出有什么不同。

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

这适用于任何元素的任何方向的"条纹"。。。