Ember jQuery“一个”事件处理程序被多次调用

Question

在我的Ember应用程序中，我有一些jQuery代码要执行（基于粘贴到输入框）

我的问题是我在代码中使用了“ one”，但是它已经执行了不止一次。 根据jQuery文档，它只能被调用一次。

didRender: function() {
    var self = this;
    var $inputs = Ember.$("input[id*=my-field]");

    $inputs.on("paste", function() {
        var $this = Ember.$(this);
        var originalValue = $this.val();
        $this.val("");

        $this.one("input", function() {
            // Why is this getting invoked more than once ?
            // Contains code which splits & sets value to multiple textboxes like 
//$inputBox.val('SPLITTED_PASTED_VALUE');
        });
    });
}

Answer 1

您看到此问题的原因是，由于每次时间余烬都会重新渲染组件/视图，因此会重新执行didRender挂钩。

因为您要附加jquery事件的输入元素在各个渲染器之间都存在，所以这些事件会不断添加。 .one()确实只执行一次，但是，实际上您已多次应用.on('paste') ，这意味着每次粘贴时， .one()都会再添加一次。

我的最终建议-停止使用jquery。 将jquery和ember混合在一起会导致发生奇怪的事情，这些事情很难追踪。

如果无法实现，则更改on-paste事件的调用方式。 加载组件/控制器时，很可能只渲染一次您的文本框。 如果是这种情况，请使用didInsertElement将jquery侦听器应用于元素。

didInsertElement: function() {
    var self = this;
    var $inputs = Ember.$("input[id*=my-field]");

    $inputs.on("paste", function() {
        var $this = Ember.$(this);
        var originalValue = $this.val();
        $this.val("");

        $this.one("input", function() {
            //Manipulations here
        });
    });
}

另外，请考虑您是否甚至需要one('input')事件。 它似乎在粘贴后立即执行，因此您可以删除该值，并在清空值后进行处理。