Question

点击“名字：詹姆斯”文字。

我在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();
})

小提琴here。

Polymer 1.x：访问dom-if中的元素

1 个答案: