javascript - polymer 变化自定义元素

Question

我对 polymer 中的自定义元素有疑问。

我有一个自定义元素，它的样式嵌套在它的模板中，对于模板中的 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 小时后)

自从我今天一直在努力解决一个不太相似的问题(但涉及 bootstrap 而不是 jquery)我已经在研究类似概念的事情。

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

我在下面展示的是部分 JQuery 解决方案(我们仍然使用 JQ 的滚动检测)，其中我还找到了使用 polymer 条件绑定(bind)语法更改样式的替代方法。

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

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

此用户对象包含反射(reflect)当前 polymer 对象的属性(这是必需的，以便 JQ 处理程序在触发时可以更新 polymer 属性)

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

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

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

表达式绑定(bind)通过使用 : 左侧的文本来工作，仅当右侧的表达式计算为真时，例如:

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

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

然而，表达式绑定(bind)在本质上是单一的，因此为了拥有超过 1 个表达式绑定(bind)，您需要将整个事物通过一个 polymer 过滤器，特别是 '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，因此看起来该组件可以很好地从中获取页面事件。

试一试看看你从这里去哪里，我将根据我的具体问题调整它，然后把它变成一个 typescript 模块:-)