聚合物更改自定义元素

Question

我对聚合物中的自定义元素有疑问。

我有一个自定义元素，其样式嵌套在其模板内，对于div如下所示：

  <template>
    <style>    
       #navWrapper{
          height: auto;;
          color:red;
          position:fixed;
          background-color:black;
          width: 100%;
       }
    </style>
  <div id="navWrapper"><content></content></div>
</template>

现在，当我向下滚动页面时，我想更改navWrapper的颜色。 我想为此使用jQuery。 因此，我的自定义元素中有一个脚本，如下所示：

<script>
Polymer('responsive-nav',{ready: function() {
$(window).scroll (function () {
        var sT = $(this).scrollTop();
            if (sT >= 100) {    
                $(this.$.navWrapper).css({backgroundColor : 'rgba(0,0,0,0.0)' })
            }else {
                ...
            }
    })

     } });
</script>

现在可悲的是什么也没做。 我已经在$（this。$。navWrapper）前面放了一个alert（test）来确定我是否到了这一点，并且做到了。 另外，当我想更改正常HTML文件中的元素的背景颜色或其他内容时，它也可以工作。 例如$（“＃testDiv”）。css（{...}）更改。 所以我的问题是：如何正确访问元素的CSS？

Answer 1

看来您的JQuery CSS调用是错误的。

我认为应该是：

.css("background-color", "rgba(0,0,0,0.0)")

而不是

.css({backgroundColor : 'rgba(0,0,0,0.0)' })

交叉引用您对JQuery文档所做的工作后，您肯定会错过'backgroundColor'中的'-'，但是我在文档中也看不到任何使用JSON对象进行更改的内容。

但是，您可以使用属性名称和值的数组（这是我怀疑您可能一直在尝试做的事情）

更新（大约1小时后）

由于Iv今天一直在努力解决一个不太相似的问题（但涉及的是Bootstrap而不是jquery），因此我已经在研究类似概念。

结果，我获得了OP的原始代码并开始使用它。

我在下面介绍的是部分JQuery解决方案（我们仍然使用JQ的滚动检测） ，在这里我还想出了使用聚合物条件绑定语法更改样式的另一种方法。

http://www.polymer-project.org/docs/polymer/expressions.html

本质上，我所做的是在设置时将用户数据对象传递给滚动事件。

该用户对象包含一个反映当前聚合物对象的属性（这是必需的，以便JQ处理程序在触发时可以更新聚合物属性）

发生窗口滚动事件时，处理程序将提取此属性，然后使用它来获取聚合物元素内部的局部变量，并使用当前滚动的上限值更新它。

由于该局部作用域属性是实际聚合物对象的一部分，因此任何聚合物数据绑定都可以读取它，此时，只需创建几个样式，然后使用表达式绑定来选择正确的样式即可。

请记住，样式是级联的，因此您可以轻松地为整个事情制作一个主样式，然后简单地根据需要更改2种样式。

仅当右侧的表达式计算为true时，表达式绑定才能使用：左侧的文本，例如：

{{ {frogs: a == 1} }}

将取代的表达与“结合”如果属性“a”是不等于1，并将其设置为“”如果属性“蛙a”是等于1。

但是，表达式绑定本质上是单数形式，因此，要具有多个表达式绑定，您需要将整个对象传递给其中一个聚合物过滤器，特别是“ tokenList”过滤器。

完成此操作后，您可以构建一个包含不同检查的整个对象，因此请扩展我们之前的示例：

{{ {frogs: a == 1, tadpoles: a == 2} | tokenList }}

现在将使结果等于``如果属性'a'不等于1且不等于2，则将结果设置为'frogs'如果属性'a'等于1并将结果设置为' '如果属性‘a’是等于2。

您可以根据需要将其扩展到任意数量的检查，但是添加的次数越多（无论如何，我猜测-未经测试） ，性能可能会降低。

现在，下面的代码将完全满足您的需要，一旦您进行了一些更改，以使其针对您自己的元素并设置了自己的样式即可：-)

<link rel="import" href="polymer.html">

<polymer-element name="x-mypolymercomponent">
  <template>
    <style>
      .under100
      {
        background-color: green;
      }

      .over100
      {
        background-color: red;
      }

    </style>


    <h1 class="{{ {under100: scroll_top <= 100, over100: scroll_top > 100} | tokenList }}">This header has a dynamic class</h1>


  </template>

  <script>
    Polymer('x-mypolymercomponent', {

      ready: function ()
      {
        $(window).scroll({scope: this}, function(event) {
          var sT = $(this).scrollTop();
          event.data.scope.scroll_top = sT;
        })
      },

      scroll_top: 0,

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

我刚刚在我目前正在研究的.NET项目中对此进行了测试，并且在chrome 36中可以正常工作，尽管Firefox中仍然存在问题，但是我认为这可能是由于昨晚发现的一个错误所致，不会对此太担心。

我也已在页面级别加载了JQuery，因此该组件似乎可以很好地拾取页面事件。

尝试一下，看看您要从这里去哪里，我将针对我的特定问题进行调整，然后将其转换为打字稿模块:-)