聚合物更改自定義元素

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，因此該組件似乎可以很好地拾取頁面事件。

嘗試一下，看看您要從這里去哪里，我將針對我的特定問題進行調整，然后將其轉換為打字稿模塊:-)