Question

我需要在iron-ajax请求之后设置动态执行函数的类的名称。

在我的元素的模板部分，我有：

<div class="{{dynamicClass}}"></div>

我已经定义了这个属性：

Polymer({
        is: "fila-contenido"
        ,
        properties: {
            dynamicClass: {
                type: Number
            }
        }
        ...

我在执行iron-ajax响应时执行了响应函数：

_onResponse: function (e) {
            var nro = e.detail.response.length;

            switch(nro){
                case 2:
                    this.dynamicClass = "class2";
                    break;

                case 3:
                    this.dynamicClass = "class3";
                    break;
                ...
            }

        }

此函数正确设置类的名称。

问题是输出没有显示动态类，但是：

<div class="style-scope fila-contenido"></div>

我怎么能这样做？谢谢！

Answer 1

要绑定到原始class属性，请使用attribute binding（即class$=）。否则，Polymer会将其视为属性绑定。

<div class$="{{dynamicClass}}">

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo'
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>
  <x-foo clazz="highlight"></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        .highlight {
          color: blue;
          background: lightgray;
        }
      </style>
      <span class$="{{clazz}}">hello world</span>
    </template>
  </dom-module>
</body>

codepen

iron-ajax之后div的动态类名

1 个答案: