Polymer 1.0 绑定属性到模板中的内联样式

Question

我想在聚合物中做这样的事情...

<dom-module id="logo-standard">
 <style>
:host {
  display: block;
}
</style>

<template>

<div class="logo-wrap">

  <div style="width: {{logoWidth}}px;">
    Some awesome logo
  </div>

</template>

<script>

(function() {

Polymer({
  is: 'logo-standard',

  properties: {

    logoWidth: {
      type: String,
      value: '400'
    }
  }

});
})();
</script>
</dom-module>

即使用属性动态设置元素样式。

这可能吗？如果是...怎么办？

Answer 1

在 Polymer 1.0 中，他们改变了一些不允许你内联样式的东西。您必须使用计算样式函数并使其 return 成为您想要的值。

 <div style$="{{computeWidth}}">



 computeWidth: function () {
   return 'width:' + this.logoWidth + 'px;'
 }

这是关于这个主题的另一个 post

编辑：我忘记了 $

Answer 2

在 Polymer 1.0 中，您需要 Computed Bindings 才能执行此操作 -

  <div style$="[[_computeWidth(logoWidth)]]">
    Some awesome logo
  </div>

  _computeWidth: function (width) {
      return 'width: ' + width + 'px' + ';color:red;';
  },

请参阅此 plunker 以供参考。

Answer 3

是的，但您需要为此创建计算绑定：

<dom-module id="logo-standard">
    <style>
        :host {
            display : block;
        }
    </style>
    <template>
        <div class="logo-wrap">
            <div style$="[[logoStyle(logoWidth)]]">
                Some awesome logo
            </div>
    </template>
    <script>
        Polymer({
            is : 'logo-standard',

            properties : {

                logoWidth : {
                    type  : String,
                    value : '400'
                }
            },
            logoStyle  : function (logoWidth) {
                return 'width: ' + logoWidth + 'px';
            }
        });
    </script>
</dom-module>

当 https://github.com/Polymer/polymer/issues/2182 解决后，可以不使用计算绑定，这似乎正在进行中。

Answer 4

这个问题我也回答过

从 Polymer 1.2.0, you can now use Compound Bindings 到

combine string literals and bindings in a single property binding or text content binding

像这样：

<img src$="https://www.example.com/profiles/{{userId}}.jpg">

<span>Name: {{lastname}}, {{firstname}}</span>

和你的例子

<div style$="width: {{logoWidth}}px;">

所以这不再是问题。

Polymer 1.0 绑定属性到模板中的内联样式

Polymer 1.0 binding properties to inline styles in template

polymer

polymer-1.0