聚合物: Vers简单的数据绑定在第二个元素中无效
聚合物: Vers简单的数据绑定在第二个元素中无效
提问于 2015-11-29 02:22:53
我现在在这个问题上工作了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，之前有一个相同的定义(实际上，我删除它只是为了跟踪问题)，这起了作用，并将值向下传递到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>在任何方向上都适用于任何元素.
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-29 03:25:50
将属性availableModes更改为available-modes。
当将属性名称映射到属性名称时：
- 属性名称转换为小写属性名称。例如，属性
firstName映射到firstname。 - 带有破折号的属性名转换为camelCase属性名，方法是将每个破折号后面的字符大写，然后删除破折号。例如，将属性
first-name映射到firstName.的
汤：https://www.polymer-project.org/1.0/docs/devguide/properties.html#property-name-mapping
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33978706
复制相关文章
相似问题
腾讯云开发者
