聚合物改变自定义元素

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 文档所做的事情，您肯定错过了“背景颜色”中的“-”，但我也没有在文档中看到任何说明使用 JSON 对象制作改变。

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

更新（大约 1 小时后）

因为我今天一直在努力解决一个不太相似的问题（但涉及 bootstrap 而不是 jquery）我已经在围绕类似的概念进行调查。

因此，我拿了 OP 的原始代码并开始使用它。

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

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

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

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

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

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

请记住，样式级联，因此您可以轻松地为整个事物制作一种主样式，然后制作两种样式，只需根据需要更改背景颜色。

表达式绑定通过使用 : 左侧的文本起作用，仅当右侧的表达式计算结果为真时，例如：

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

如果属性 'a' 不等于 1，则将表达式绑定替换为 ''，如果属性 'a' 等于 1，则将其设置为 'frogs' 1.

然而，表达式绑定本质上是单一的，因此为了拥有超过 1 个表达式绑定，您需要将整个事物通过聚合物过滤器之一，特别是 'tokenList' 过滤器。

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

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

现在如果属性 'a' 不等于 1 且不等于 2 则使结果等于 ''，同时将结果设置为 'frogs' 如果属性 'a' 等于 1，如果属性 'a' 等于 2，则将结果设置为 'tadpoles'。

您可以将其扩展到任意数量的检查，但是您添加的越多（我猜反正我没有测试过）可能会降低性能。

现在，下面的代码将完全满足您的需求，只要您进行一些更改，以便它针对您自己的元素并设置您自己的样式：-)

<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，所以看起来组件可以很好地从中获取页面事件。

试一试，看看你从哪里开始，我将根据我的具体问题对其进行调整，然后将其变成一个打字稿模块:-)