单击按钮后的聚合物变化功能

Question

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

这真的可能吗？

例子... 单击搜索图标 > 搜索栏展开> 输入问题并单击搜索图标 > 搜索...

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 */
}

2017 年 3 月 7 日更新

我以为我已经解决了这个问题，但我有一个错误...

我更改了输入文本时的搜索按钮以触发新功能（这将用于将来作为 PUT 或其他内容进行实际搜索），但是我无法将其还原为原始功能之后的功能...例如，请参阅我的 GIF。

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

Answer 1

我在 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 2

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

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 3

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

至于你想要完成的事情，我想不出更好的方法或任何理由都不是一个好主意。

你的代码不工作吗？如果不是，我认为这只是因为 setAttribut.

上有错字

Answer 4

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

searchClick : function() {
    if(this.expanded){
     //do search
    }
    this.expanded = !this.expanded;
}

单击按钮后的聚合物变化功能

polymer change function of on-click button after clicking it

html

javascript

polymer

2017 年 3 月 7 日更新