Html 聚合物1.0中的数据绑定<；风格>；
我又在修补聚合物了，有件事我想做，但它不起作用，而且工作环境看起来很混乱。我想设计一个元素的样式，但要利用数据绑定。基本上，我尝试这样做：Html 聚合物1.0中的数据绑定<；风格>；,html,data-binding,polymer,Html,Data Binding,Polymer,我又在修补聚合物了，有件事我想做，但它不起作用，而且工作环境看起来很混乱。我想设计一个元素的样式，但要利用数据绑定。基本上，我尝试这样做： <dom-module id="proto-element"> <template> <style> #wrapper{ width:{{pixels}}; background: #e1e1e1; } #bar{ width:
<dom-module id="proto-element">
<template>
<style>
#wrapper{
width:{{pixels}};
background: #e1e1e1;
}
#bar{
width:80%;
}
</style>
<div id="wrapper">
<div id="bar" style$={{barStyle}}>I'm the bar! <b>{{test}}</b></div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "proto-element",
ready: function() {
this.pixels = "300px";
this.test = "Fear me!"
}
});
</script>
#包装纸{
宽度：{{像素}}；
背景：#e1e1；
}
#酒吧{
宽度：80%；
}
我是酒吧！{{test}}
聚合物({
是：“原始元素”，
就绪：函数（）{
此参数为.pixels=“300px”；
this.test=“害怕我！”
}
});
绑定到此.test的文本工作得非常完美。但是样式中的小胡子标签会被忽略。有没有简单的解决办法？因为当您使用多个css规则时，使用内联样式$=语法非常混乱，而且如果您想要的值是在其他地方获得的，则始终需要包含一个字符串才能工作。有什么好的清洁解决方案吗？恐怕你想要的（至少目前）是不可能的。数据绑定仅在标记内部工作，可以是a或a中的模板 在标签中，数据绑定根本不起作用。您可以尝试在标记内放置另一个标记（这很混乱），但仍然无法使数据绑定属性正常工作，因为花括号{{…}必须位于单个标记内，并且（当前）不能被空格（空格、换行符等）包围，请参见： 标记内不支持字符串连接，并且标记不能包含任何空格 tl；dr:有两个问题会妨碍您实现所需目标：1）数据绑定仅在模板标记内工作，2）如果您要打印数据绑定属性，则必须将它们包含在html标记内 您可以尝试另一种方法：
ready: function () {
this.$.wrapper.style.width = '300px';
}
编辑：另外，我刚刚注意到您实际上已经将标记放在了中，这是不建议的。由于聚合物为0.8，这是自定义元件的推荐结构：
<dom-module>
<style> ... </style>
<template> ... </template>
</dom-module>
<script> ... </script>
...
...
...
编辑2：从聚合物1.1开始，建议的元素结构（如Max Waterman所指出）已更新为：
<dom-module>
<template>
<style> ... </style>
...
</template>
<script> ... </script>
</dom-module>
...
...
...
ready: function () {
this.$.wrapper.style.width = '300px';
}
编辑：另外，我刚刚注意到您实际上已经将标记放在了中，这是不建议的。由于聚合物为0.8，这是自定义元件的推荐结构：
<dom-module>
<style> ... </style>
<template> ... </template>
</dom-module>
<script> ... </script>
...
...
...
编辑2：从聚合物1.1开始，建议的元素结构（如Max Waterman所指出）已更新为：
<dom-module>
<template>
<style> ... </style>
...
</template>
<script> ... </script>
</dom-module>
...
...
...