<styles>中的Polymer 1.0数据绑定

Question

我再次修补聚合物,有一些我想做的但它不起作用,解决方法看起来很混乱.我想为一个元素设置样式,但是要利用数据绑定.基本上我尝试这样做:

<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

我担心你想要的是(至少目前)不可能.数据绑定仅在<template>标记内部工作,<template is ="auto-binding">或<dom-module>中的模板.

在<style>标记中,数据绑定根本不起作用.您可以尝试将另一个<style>标记放在<template>标记内(这很脏),但是仍然无法使数据绑定属性起作用,因为大括号{{...}}必须在里面一个单独的标签,不能(当前)被空格(空格,换行符......)包围,请参阅文档:

标记内不支持字符串连接,标记不能包含任何空格...

tl; dr:有两个问题阻止你实现你想要的:1)数据绑定仅在模板标签内工作; 2)如果你想打印出数据绑定属性,它们必须包含在html标签内.

您可以尝试不同的方法:

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

这个.允许你轻松访问任何带有id属性的DOM元素(例如你的#wrapper,可以这样访问.$.wrapper),然后你可以设置元素的任何其他属性(这个.$.包装.在这种情况下的style.width).

编辑:另外,我刚刚注意到你实际上已经将<style>标签放在<template>中,这是不建议的.从Polymer 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>