Question

我有一堆包含不同动画的css文件，我想根据动画属性动态加载聚合物元素中的css文件：

是否可以像这样绑定{{animation}}值：

<polymer-element name="yo-dialog" attributes="animation">
    <template>
        <link rel="stylesheet" href="yo-dialog.css">
        <link rel="stylesheet" href="dialog.css">
        <link rel="stylesheet" href="dialog-{{animation}}.css">

        <div id="somedialog" class="dialog">
            <div class="dialog__overlay"></div>
            <div class="dialog__content">            
                <content> </content>
                <div>
                    <button class="action" data-dialog-close>{{animation}}</button>
                </div>
            </div>
        </div>
    </template>

元素用法：

<yo-dialog id="the_dialog" animation="ken">
    <h1>hello world</h1>
</yo-dialog>

Answer 1

当我遇到同样的问题时，我发现解决它的最快方法是在我知道属性设置时以编程方式添加link元素，即在domReady事件中：

在你的代码中，我将使用聚合物声明代替链接标记：

<polymer-element name="yo-dialog" attributes="animation">
    <template>
        <link rel="stylesheet" href="yo-dialog.css">
        <link rel="stylesheet" href="dialog.css">

        <div id="somedialog" class="dialog">
            <div class="dialog__overlay"></div>
            <div class="dialog__content">            
                <content> </content>
                <div>
                    <button class="action" data-dialog-close>{{animation}}</button>
                </div>
            </div>
        </div>
    </template>
    <script>
      Polymer("yo-dialog", {
        domReady: function() {
          var fileref=document.createElement("link")
          fileref.setAttribute("rel", "stylesheet")
          fileref.setAttribute("type", "text/css")
          fileref.setAttribute("href", "dialog-"+this.animation+".css")
          console.log(fileref)
          this.appendChild(fileref)
          console.log("domReady!")

        }
      });
    </script>
</polymer-element>

我在Plunker中提交了一份工作样本：http://plnkr.co/edit/IrN2FpDDN4PX1MVQqC1C?p=preview

Answer 2

是的，有可能。您需要为href属性使用_前缀，以便它可以解析任何模板绑定。

尝试：

<link rel="stylesheet" _href="dialog-{{animation}}.css">

有条件地在聚合物元素中加载css文件

2 个答案: