jQueryコードをPolymerに変換しますか？

Question

JQueryをPolymerJSに変換することは可能でしょうか？

問題：特定のCSSクラスを、クリックされた要素にのみ適用するようにしたい。

JQueryで作業していましたが、Polymerで実行できるかどうか疑問に思っていますか？ アクティブな要素からCSSを追加したり削除したりする方法は知っていますが、アクティブな要素以外のすべての要素から削除する方法はありません。

コンポーネントを

<iron-ajax id="userGet" handle-as="json" method="GET" on-response="setUser"></iron-ajax> 
    <div class="iron-list-container"> 
     <iron-list id="list" items="setUser" as="user" > 
      <div class="item" id="item"> 
       <!-- USER INFO STUFF GOES HERE --> 
      </div> 
     </iron-list> 
    </div> 

GIF of functionality I have with the JQuery

はJQuery

toggleLeftBorder: function() { 
    $(".item").click(function() { 
     $('.item').removeClass('addBorderLeft'); 
     $(this).addClass('addBorderLeft'); 
    }) 
}, 

PolymerJSこれまで

0123に印加されます

toggleLeftBorder : function() { 
    /* this line will add the necessary css class to selected elements */ 
    this.$.item.classList.add('addBorderLeft'); 
}, 

Answer 1

jQueryのように、Polymerでこれを行うには1つのライナーはありません。 Polymerはできるだけ軽量化を図り、非常に多くのDOM操作ツールを追加することはありません。

バニラJSでの同等の行は次のようになります。

this.shadowRoot.querySelectorAll('.addBorderLeft') 
    .forEach(item => item.classList.remove('addBorderLeft'); 

あなただけの時に選択項目が1つあなただけの以前に選択した項目を追跡し、あなたが設定する前に、そこからクラスを削除することができたいので新たに一つの選択：しかし

toggleLeftBorder : function() { 
    if (this.selectedUserElement) { 
    this.selectedUserElement.classList.remove('addBorderLeft'); 
    } 

    this.selectedUserElement = this.$.item; 
    this.selectedUserElement.classList.add('addBorderLeft'); 
}, 

を、それがで焼い選択が付属していますが、iron-listを使用しているので、あなたはこのように宣言的にこれを行うことができるはず：

<iron-ajax id="userGet" handle-as="json" method="GET" on-response="setUser"></iron-ajax> 

<div class="iron-list-container"> 
    <iron-list id="list" items="[[setUser]]" as="user" 
    selection-enabled selected-item="{{selectedUser}}"> 
    <div class="item"> 
     <!-- USER INFO STUFF GOES HERE --> 
    </div> 
    </iron-list> 
</div> 

これは、次の操作を行います：

• 常に現在選択されているユーザであるselectedUserと呼ばれる、あなたの要素のプロパティを作成します。とにかくあなたの要素/アプリケーションのどこかでこれが必要だと思う。
• アイテムにselectedクラスを追加します。これはあなたのaddBorderLeftクラスとは異なりますので、スタイルを.selectedにする必要があります。