将jQuery代码转换为Polymer？

完全可以将一些JQuery转换为PolymerJS吗？将jQuery代码转换为Polymer？

问题：希望某个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到目前为止

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

来源

2017-06-22 physicsboy

您是否需要支持选择多个项目？它看起来像从jQuery片段，这是不可能的，但只是想确保我明白。 – zacharytamas

你在找什么基本上是一个关于如何编写聚合物代码的教程..因为如何将jQuery代码转换为香草是非常明显的，所以你要求我们教你如何编写一个简单的聚合物代码？是不是已经有在线教程？ – vsync

@zacharytamas：我添加了一个GIF，使用了我想要重现的JQuery的当前功能。 – physicsboy

像jQuery提供的那样，在Polymer中没有这样做。聚合物尽可能减轻重量，并且不添加很多DOM操作工具。

香草JS的等效线可能是：

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

既然你只希望一次选择一个项目，你可以只跟踪先前选择的项目，并从中取出类，你设置的前新选一个：

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类添加到所选iron-list项目。请注意，这与addBorderLeft类不同，因此您需要将样式放在.selected上。

来源

2017-06-22 15:00:53 zacharytamas

将jQuery代码转换为Polymer？

回答

相关问题