DOM Scripting in Google Polymer

Question

Я просто работал над учебником Google Polymer, и я создаю свой первый собственный элемент. И мне не хватает некоторых функций DOM-Scripting, которые я знаю из Prototype и jQuery, которые сделали мою жизнь очень легкой. Но, может быть, мои методы просто не правы. Это то, что я сделал до сих пор:

<polymer-element name="search-field"> 
    <template> 

    <div id="searchField"> 
     <ul id="searchCategories"> 
      <li><a id="search-categories-text" data-target="text" on-click="{{categoryClick}}">Text</a></li> 
      <li><a id="search-categories-videos" data-target="videos" on-click="{{categoryClick}}">Videos</a></li> 
      <li><a id="search-categories-audio" data-target="audio" on-click="{{categoryClick}}">Audio</a></li> 
     </ul> 
     <div id="searchContainer"> 
      <input id="searchText" type="text" /> 
      <input id="searchVideos" type="text" /> 
      <input id="searchAudio" type="text" /> 
     </div> 
    </div> 

    </template> 
    <script> 
    Polymer({ 
     ready: function() { 

     }, 
     categoryClick: function(event, detail, sender) { 
      console.log(sender.dataset.target); 
      console.log(this.$.searchField.querySelector('#searchContainer input')); 
      this.this.$.searchField.querySelector('#searchContainer input'); 
     } 
    }); 
</script> 
</polymer-element> 

То, что я хочу сделать, это установить активный класс нижних входных полей, когда один из указанных выше ссылок щелкают. В jQuery я бы просто заметил ссылку и деактивировал все поля ввода и активировал одно поле ввода, которое я хочу иметь. Но я не уверен, как это сделать без jQuery. Я мог бы использовать все собственные функции javascript с петлями и т. Д., Но есть ли что-нибудь, что может предложить полимер, чтобы облегчить ситуацию?

Answer 1

Этот пример делает то, что вы хотите?

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script> 
 

 
<polymer-element name="search-field"> 
 

 
    <template> 
 

 
    <style> 
 
     .hideMe { 
 
     display: none; 
 
     } 
 
    </style> 
 

 
    <div id="searchField"> 
 

 
     <ul id="searchCategories"> 
 

 
     <template repeat="{{category in searchCatergories}}"> 
 
      <li><a on-click="{{categoryClick}}">{{category}}</a></li> 
 
     </template> 
 

 
     </ul> 
 

 
     <div id="searchContainer"> 
 

 
     <template repeat="{{category in searchCatergories}}"> 
 

 
      <div class="{{ { hideMe: category !== selectedCategory} | tokenList }}"> 
 
      <label>Search for {{category}}</label> 
 
      <input id="search{{category}}" type="text"> 
 
      </div> 
 

 
     </template> 
 

 
     </div> 
 

 
    </div> 
 

 
    </template> 
 

 
    <script> 
 
    Polymer({ 
 

 
     searchCatergories: [ 
 
     "Text", 
 
     "Video", 
 
     "Audio" 
 
     ], 
 

 
     selectedCategory: 'Text', 
 

 
     categoryClick: function(event, detail, sender) { 
 

 
     // grab the "category" item from scope's model 
 
     var category = sender.templateInstance.model.category; 
 

 
     // update the selected category 
 
     this.selectedCategory = category; 
 

 
     // category 
 
     console.log("category", category); 
 

 
     // you can also access the list of registered element id's via this.$ 
 
     // try Object.keys(this.$) to see registered element id's 
 

 
     // this will get the currently showing input ctrl 
 
     selectedInputCtrl = this.$["search" + category]; 
 

 
     } 
 
    }); 
 
    </script> 
 
</polymer-element> 
 

 
<search-field></search-field>

Я создал массив для категорий и добавлены два шаблона повтора. Я установил класс .hideMe, который задан для всех элементов ввода, которые не относятся к выбранной в данный момент категории.

Информация о динамических классах - https://www.polymer-project.org/docs/polymer/expressions.html#tokenlist

Информация на повторе - https://www.polymer-project.org/docs/polymer/binding-types.html#iterative-templates

Надежда, что помогает