DOM 在 Google Polymer 中编写脚本

Question

我刚刚完成了 Google Polymer 教程，并且正在构建我的第一个元素。而且我缺少一些我从 Prototype 和 jQuery 知道的 DOM 脚本函数，它们让我的生活变得非常轻松。但也许我的方法不对。这是我到目前为止所做的：

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

我想要做的是在单击上述 link 之一时将活动的 class 设置到底部输入字段。在 jQuery 上，我只会观察 link 并停用所有输入字段并激活我想要的一个输入字段。但是我不确定如果没有 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 class，它设置在所有不是当前选定类别的输入元素上。

动态信息 classes - https://www.polymer-project.org/docs/polymer/expressions.html#tokenlist

关于重复的信息 - https://www.polymer-project.org/docs/polymer/binding-types.html#iterative-templates

希望对您有所帮助

DOM 在 Google Polymer 中编写脚本

DOM Scripting in Google Polymer

javascript

polymer