Question

我再次使用 Polymer 进行修补，我想做一些事情，但它不起作用，而且变通方法看起来很混乱。我想为一个元素设置样式，但是要利用数据绑定。基本上我试着这样做：

<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>

绑定到this.test的文本无效。但是样式内部的小胡子标签会被忽略。有一个简单的解决方案吗？因为当你使用多个css规则时使用内联样式$ =语法是非常混乱的，并且如果你想要的值是在其他地方获得的，你总是需要为它设置一个字符串。关于一个很好的清洁解决方案的任何想法？

Answer 1

我担心你想要的是（至少目前）不可能的。数据绑定仅适用于＆lt; template＆gt;内部标签，＆lt; template is =“auto-binding”＆gt;或＆lt; dom-module＆gt;内的模板。

在＆lt; style＆gt;中标签，数据绑定根本不起作用。您可以尝试使用另一个＆lt; style＆gt;标签INSIDE＆lt; template＆gt;标记（这是凌乱的），但你仍然不会使数据绑定属性工作，因为大括号{{...}}必须在单个标记内，并且不能（当前）被空格包围（空格，换行符......），请参阅docs：

标记内部不支持字符串连接，并且标记不能包含任何空格...

tl; dr：有两个问题阻止您实现所需目标： 1）数据绑定仅适用于模板标记和 2 ）如果要打印出数据绑定属性，它们必须包含在html标记内。

您可以尝试不同的方法：

ready: function () {
    this.$.wrapper.style.width = '300px';
}

这个。$ 允许您轻松访问具有 id 属性的任何DOM元素（例如您的#wrapper，可以这样访问。$。包装器）从那里，您可以设置元素的任何其他属性（在这种情况下，此。$。wrapper。 style.width ）。

编辑：另外，我刚注意到你实际上已经把＆lt; style＆gt; ＆lt; template＆gt;内的标记，不建议使用。从Polymer 0.8开始，这是自定义元素的推荐结构：

<dom-module>
    <style> ... </style>
    <template> ... </template>
</dom-module>
<script> ... </script>

查看Overview和Migration guide。

编辑2：从聚合物1.1开始，建议的元素结构（由Max Waterman指出）已更新为：

<dom-module>
    <template> 
        <style> ... </style>
        ...
    </template>
    <script> ... </script>
</dom-module>

<styles>中的Polymer 1.0数据绑定

1 个答案: