聚合物模板有邮票活动吗？

Question

我试图在每次输入模板内容时将输入元素集中在聚合物模板内部。问题是在模板加载之前，我无法选择输入元素。当前，我只是在使用setTimeout来在模板加载后100ms内聚焦输入，但是我想知道是否有更优雅的解决方案。另外，自动聚焦属性不起作用，因为模板可能会取消标记并重新标记很多次。现在，我的代码看起来像这样（在聚合物元素定义内）：

Polymer({

  // ...

  showInput: false,

  makeInputVisible: function() {
    this.showInput = true;
    var container = this.$.container;
    setTimeout(function() {
      container.querySelector("#input").focus();
    }, 100);
  },
});

<div id="container">
  <template if="{{showInput}}">
    <input id="input" is="core-input" committedValue="{{inputValue}}" />
  </template>
</div>

但是我更喜欢这样的东西：

Polymer({

  // ...

  showInput: false,

  makeInputVisible: function() {
    this.showInput = true;
  },

  focusInput: function() {
    this.$.container.querySelector("#input").focus();
  },
});

<div id="container">
  <template if="{{showInput}}"
            on-stamp="{{focusInput}}">
    <input id="input" is="core-input" committedValue="{{inputValue}}" />
  </template>
</div>

任何想法表示赞赏。

Answer 1

在 Polymer 1.0 中，模板在标记时会触发“dom-change”事件。然而，使用 dom-if 模板会带来显着的性能成本，因为它们需要操作 dom 树。这样做会更好：

<div id="container">
  <input id="input" hidden="[[!showInput]]" value="{{inputValue::input}}">
</div>

observers: [
  '_showInputChanged(showInput)',
],

_showInputChanged: function (showInput) {
  if (showInput) {
    this.$.input.focus();
  }
},