Polymer：Vers 简单数据绑定在第二个元素中不起作用

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>

"strips" 在任何方向上对任何元素都有效...

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

Polymer：Vers 简单数据绑定在第二个元素中不起作用

Polymer: Vers simple data binding doesn't work in the second element

html

javascript

dom

polymer

polymer-1.0