0

这是我的 JSBin

单击“名字：詹姆斯”文本。

我在 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>
4

1 回答 1

1

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

您应该异步运行选择器，以便 Polymer 有时间更新 DOM，例如：

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

在这里拉小提琴。

于 2016-11-08T14:54:13.320 回答