聚合物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