聚合物：簡單數據綁定在第二個元素中不起作用

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