Polymer 1.x: 访问 dom-if 内的元素

Question

单击 "First Name: James" 文本。

我在 dom-if 中有一个输入元素。在一个事件中，我正在使 dom-if 通过，因此该元素将存在，但在使 dom-if 条件通过后我无法立即访问输入元素。

可能我需要知道 dom-if 何时实际求值，以及为什么即使条件变为真，元素也不存在。

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-form/iron-form.html" rel="import">
  <link href="paper-input/paper-input.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>
  <template is="dom-if" if="{{!editMode}}">
    <span id="name" on-tap="_makeEditable">{{name}}: {{value}}</div>
  </template>
  <template is="dom-if" if="{{editMode}}">
    <paper-input id="input" label="{{name}}" value="{{value}}"></paper-input>
  </template>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        editMode: {
          type: Boolean,
          value: false
        },
        name: {
          type:String,
          value:"First Name"
        },
        value: {
          type:String,
          value:"James"
        }
      },
      _makeEditable: function() {
        this.editMode = true;
        //how to find the input element here
        //this.$$('#input').querySelector("input").focus();
        //this.$.input.querySelector("input").focus();
      }
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Answer 1

这是因为将 this.editMode 设置为 true 不会立即更新 DOM。

你应该运行你的选择器是异步的，这样Polymer就有时间更新DOM，比如：

this.async(function() {
   this.$$('#input').focus();
})

Fiddle here.

Polymer 1.x: 访问 dom-if 内的元素

Polymer 1.x: accessing element within dom-if

polymer

dom-if