Polymer 1.x: доступ элемент в дом-если

Here is my JSBin Polymer 1.x: доступ элемент в дом-если

Нажмите на "Имя: Джеймс" текст.

У меня есть элемент ввода внутри 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>

источник

2016-11-08 Jimmy Vithalani

Это происходит потому, что установка this.editMode в true не обновляет DOM мгновенно.

Вы должны работать ваш селектор асинхронно, так что полимер имеет некоторое время, чтобы обновить DOM, такие как:

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

Fiddle here.

источник

2016-11-08 14:54:13

Спасибо @Yurii! Это сработало.
Хотя я столкнулся с другой проблемой: 'this. $$ ('# input'). Focus()' не работает для меня. Он работает, когда я делаю это. $$ ('# input'). QuerySelector ('input'). Focus() '. Он отлично работает в JSBin, который является более простой версией того, что я на самом деле делаю. Какие-нибудь намеки на то, на что я должен обратить внимание? –

Можете ли вы опубликовать скрипку? –

Как я уже сказал, @Yurii, он отлично работает в JSBin, только на моей локальной машине это проблема. Вероятно, ошибка в версии для полимера, которую я использую (v1.6) !? Вы знаете, как я могу ссылаться на точную версию полимера в JSBin? Я совершенно новичок в этом. Благодаря... –

Polymer 1.x: доступ элемент в дом-если

ответ

Смежные вопросы