Select 使用“Ember.run”插入后的输入

Question

已更新 — 我下面的解决方案的问题是 Ember.run 附近的 if 语句。删除它解决了问题，但我的方法也不正确。我应该按照 acorncom 的建议制作一个自定义组件，而不是在渲染后安排焦点。

原题：

我正在基于模型上的数组构建文本输入列表。在换行符上，我想插入一个新的文本字段，然后 select 它。我正在尝试使用 Ember.run.scheduleOnce 执行此操作，但从未调用过我提供的函数。

我已重新打开文本字段以公开 data-index 属性绑定，并在我的模板中呈现：

{{#each model.entries as |entry index|}}
  {{input value=entry.text class='field--entry' data-index=index insert-newline=(action 'insertEntry' index)}}
{{/each}}

在我的控制器中：

actions: {
  insertEntry(index){
    // This works fine and a new textfield is added.
    this.get('model.entries').addObject({text: 'Example'});

    if (index){ 
      Ember.run.scheduleOnce('afterRender', this, function(){
        // This doesn't seem to work at all. 
        console.log("This is never logged");
        $(".field--entry[data-index='" + index + 1 + "']").focus();
      });
    }
  }
}

Answer 1

您的模板中存在句法错误，我已将其修复。我怀疑在您的情况下，从未以某种方式调用该操作。你能看看我给你准备的twiddle吗？它所做的只是添加一个新的 input 并将焦点放在它上面。我刚刚将 jquery 的选择逻辑更改为

Ember.$(`.field--entry:eq(${index+1})`).focus();

并且它按预期工作。

Answer 2

我认为您不需要手动操作焦点： Ember 可以在渲染时设置自动对焦属性。 “(eq index 0)”仅在第一个元素上将其设置为 true

{{#each model.entries as |entry index|}}
  {{input value=entry.text autofocus=(eq index 0)}}
{{/each}}

Answer 3

根据此处正在进行的分支 (https://github.com/ember-best-practices/recommendations/blob/initial-pass/guides/run.md)，如果有其他方法效果更好，您通常希望避免使用 afterRender。

我建议使用组件来处理项目列表的呈现，因为您可以使用组件生命周期挂钩来完成您想要的事情。如果您查看指南（特别是讨论 didRender 的部分），您会看到一个与您所追求的非常匹配的示例...... https://guides.emberjs.com/v2.17.0/components/the-component-lifecycle/#toc_making-updates-to-the-rendered-dom-with-code-didrender-code

Select 使用“Ember.run”插入后的输入

Select an input after its inserted using `Ember.run`

ember.js