单击按钮后的聚合物更改功能

Question

我有一个扩展的搜索栏，当我点击时，由于我为点击功能编写的JS而扩展。我还希望这个点击功能能够改变，这样当我输入内容时，我实际上可以使用搜索栏进行搜索。

这实际上可行吗？

...例 点击搜索图标＆gt;搜索栏扩展＆gt; 输入问题并点击搜索图标＆gt;搜索...

HTML

<paper-input id="searchMe" placeholder="Some text as a placeholder" on-input="inputText">
   <div suffix>
      <paper-icon-button class="clear" id="clearIcon" icon="clear" on-click="clearInput" style="display: none;"></paper-icon-button>
      <paper-icon-button class="search" id="searchIcon" icon="search" on-click="searchClick"></paper-icon-button>
    </div>
</paper-input>

JS

searchClick : function() {
    /* expands the search bar */
    this.$.searchIcon.setAttribut('on-click','doSomethingElse');
}

doSomethingElse : function() {
    /* Does something else */
}

更新03/07/17

我以为我已对此进行了排序，但我有一个错误...

我在输入文本时更改了搜索按钮以触发新功能（这将用于将来实际搜索为PUT或其他东西），但是我无法让它在之后恢复到原始功能...例如，请参阅我的GIF。

 doSomething : function() { 
     this.$.searchMe.value = 'JS has been switched!';
     this.listen(this.$.iconSearch, 'click','searchClick');
 },

Answer 1

另一种解决方案可能是隐藏您不需要的按钮：

<强> HTML

<paper-input id="searchMe" placeholder="Some text as a placeholder" on-input="inputText">
  <div suffix>
    <paper-icon-button class="clear" id="clearIcon" icon="clear" on-click="clearInput" style="display: none;"></paper-icon-button>
    <template is="dom-if" if="[[expandedBar]]">
      <paper-icon-button class="search" id="searchIcon" icon="search" on-click="searchClick"></paper-icon-button>
    </template>
    <template is="dom-if" if="[[!expandedBar]]">
      <paper-icon-button class="search" id="searchIcon" icon="search" on-click="expandBar"></paper-icon-button>
    </template>
  </div>
</paper-input>

<强> JS

expandBar: function() {

  /* expands the search bar */
  ...

  this.set('expandedBar', true);
}

searchClick: function() {
   /* Search */
}

Answer 2

我在GitHub板上发布问题后不久找到了解决方案。 Here is the solution I found

请参阅以下代码，了解对我有用的内容。

searchClick : function() {
    /* expands the search bar */
    this.listen(this.$.searchIcon, 'click', 'doSomethingElse'); /* THIS IS THE CORRECT LINE */
}

doSomethingElse : function() {
    /* Does something else */
}

Answer 3

是的，on-click是一个属性，您可以像其他任何一样更改它。只需确保第一个函数在更改之前触发。

至于你想要完成什么，我想不出更好的方法或任何理由是个坏主意。

您的代码无效吗？如果不是，我认为这只是因为setAttribut上有拼写错误。

Answer 4

为什么不在点击和搜索时切换搜索栏的展开状态属性，或者根据当前状态进行展开。

serve_forever()