gpt4 book ai didi

javascript - 使用来自父函数的事件的子元素中的 polymer 触发函数

转载 作者:行者123 更新时间:2023-11-29 17:57:28 24 4
gpt4 key购买 nike

我有一个元素,它的子元素充当按钮。当我在父元素的输入框中按“Enter”时,我想触发子元素的 _runNavigation 方法。创建父级向子元素触发事件的自定义触发器的最佳方法是什么?

我已经尝试在我的子元素中创建一个 EventListener:

<...>
<button type="button" class="btn btn-success" on-click="_runNavigation">{{result}}</button
<...>

Polymer({

is: 'search-button',

properties: {
searchQuery: {
type: String,
}
},

ready : function (){
document.addEventListener('fire', this._runNavigation);
},

navigate: function(url) {
var win = window.open(url, '_blank');
if (win != null) {
win.focus();
}
},


_runNavigation: function() {
var text = this.searchQuery;
this.navigate("https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=" + text);
},

});

当文本框处于焦点时按下 enter 时触发事件:

<...>
<input id="input" type="text" value="{{searchQuery::input}}" on-keydown="checkForEnter" on-change="_inputChanged" class="form-control" placeholder="Search">
<...>


checkForEnter: function(e) {
// check if 'enter' was pressed
if (e.keyCode === 13) {
// enter pressed!
console.log("ENTER!");
this.fire('fire', {searchQuery: this.searchQuery});
}
}

虽然这会触发一个由子元素拾取的事件,但“this.navigate”不会运行,因为“this”现在是文档。我尝试将事件监听器更改为 this.addEventListener('fire', this._runNavigation);将其添加到元素本身,但随后元素未检测到来自父元素的触发器。

最佳答案

如果您别无选择,只能在 Polymer 元素中使用 document.addEventListener,则必须将 this._runNavigation 的上下文设置为 bind():

ready: function() {
document.addEventListener('fire', this._runNavigation.bind(this)); // avoid!
}

虽然这在您的示例中可行,但它会监听 fire 事件整个文档,因此如果表单层次结构之外的任何其他元素触发了该事件,它会触发您的元素的处理程序,这可能是不可取的。例如:

  <x-form></x-form> <!-- listens to all 'fire' events -->

<script>
setTimeout(function() {
// unrelated 'fire'
document.dispatchEvent(new Event('fire'));
}, 1000);
</script>

codepen

您可能已经猜到了,Polymer 提供了在子元素上触发事件的 API...

要将事件分派(dispatch)给 child ,您需要在调用 fire() 时设置几个选项。

fire(type, [detail], [options]). Fires a custom event. The options object can contain the following properties:

  • node. Node to fire the event on (defaults to this).

  • bubbles. Whether the event should bubble. Defaults to true.

  • cancelable. Whether the event can be canceled with preventDefault. Defaults to false.

在您的情况下,bubblesnode 选项会很有用:

this.fire('fire', { searchQuery: this.searchQuery }, { bubbles:false, node: this.$.searchButton });

然后,在您的 search-button 元素中,您将使用:

this.addEventListener('fire', this._runNavigation); // bind() not necessary here

请注意,在此演示中,fire 事件不会冒泡到文档(事件处理程序中没有记录警告)。

codepen

关于javascript - 使用来自父函数的事件的子元素中的 polymer 触发函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37767376/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com