DOM Scripting in Google Polymer

Question

I just worked through the Google Polymer tutorial and I am building my first own element. And I am missing some DOM-Scripting Functions I know from Prototype and jQuery that made my life very easy. But maybe my methods are just not right. This is what I have done so far:

<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>

What I want to do is to set an active class to the bottom input-fields when one of the above links are clicked. On jQuery I would just observe a link and deactivate all input fields and activate the one input field I want to have. But I am not sure how to do it without jQuery. I could just use all the native javascript functions with loops etc but is there anything polymer can offer to make things easier?

Answer 1

Does this example do what you want?

<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>

I've created an array for the categories and added two repeat templates. I've setup a .hideMe class which is set on all input elements that aren't the currently selected category.

Info on dynamic classes - https://www.polymer-project.org/docs/polymer/expressions.html#tokenlist

Info on repeat - https://www.polymer-project.org/docs/polymer/binding-types.html#iterative-templates

Hope that helps