javascript - Polymer:Vers 简单数据绑定(bind)在第二个元素中不起作用

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 中的定义，我希望两个元素中的可用模式相同。但如果我输入: documtent.getElementById('dataArray').availableModes 我得到 15(完全没问题)，但是当我输入时 document.getElementById('flatViewer').availableModes 它说未定义 奇怪的是，之前以同样的方式有另一个定义(事实上，我只是删除它来追踪问题)并且它起作用并将值传递到 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>

这适用于任何元素在任何方向上的“ strip ”...

Answer 1

将属性 availableModes 更改为 available-modes。

When mapping attribute names to property names:

• Attribute names are converted to lowercase property names. For example, the attribute firstName maps to firstname.

• Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. For example, the attribute first-name maps to firstName.

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