聚合物1.x：dom-if中的访问元素

Question

单击“名字：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();
})

在这里摆弄。

聚合物1.x：dom-if中的访问元素

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-11-08 14:54:13

聚合物1.x：dom-if中的访问元素

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-11-08 14:54:13

解决方案1
1 已采纳 2016-11-08 14:54:13