JS/HTML5/Meteor Как изменить ввод на метку?

Question

У меня есть форма ввода в HTML, например:

<input type = "text" id ="name" placeholder = "Name"/> 

я могу изменить «заполнитель» значение с:

document.getElementById('name').placeholder = Session.get("username") 

После установки пользователя на начальный вход, но я хочу на самом деле изменить ввод в метку (скажем, ap-тег с сильным) с Session.get («username») в качестве значения. Как?

Answer 1

Вы можете использовать replaceChild() и document.createElement():

var newP = document.createElement('p'), 
    newStrong = document.createElement('strong'), 
    text = document.createTextNode(Session.get('username')), 
    input = document.getElementById('name'); 

newStrong.appendChild(text); 
newP.appendChild(newP); 
input.parentNode.replaceChild(newP, input); 

Ссылки:

• Node.appendChild().
• Node.replaceChild().

Answer 2

Вы можете использовать реактивность:

Ваш JS (на стороне клиента)

Template.hello.placeholder = function() { 
    return Session.get("username"); 
} 

Ваш HTML

<template name="hello"> 
    <input type = "text" id ="name" placeholder = "{{placeholder}}"/> 
</template> 

Как только вы измените его Session.set("username", новое значение ) новый значение будет применяться реактивно.

Answer 3

Используйте комбинацию реактивности и шаблонов для достижения того, что вам нужно для движения Метеор.

template_name.html

<template name="template_name"> 
    {{#if username}} 
     <p><strong>{{username}}</strong></p> 
    {{else}} 
     <form> 
      <input type="text" name="username" placeholder="username" required /> 
      <button type="submit">Submit</button> 
     </form> 
    {{/if}} 
</template> 

template_name.js

Template.template_name.helpers({ 
    username:function(){ 
     return Session.get("username"); 
    } 
}); 

Template.template_name.events({ 
    "submit form":function(event,template){ 
     event.preventDefault(); 
     var username=template.find("input[name='username']").value; 
     Session.set("username",username); 
    } 
}); 

Когда ваш шаблон будет первый рендер, помощник имя пользователя будет неопределенным, а другой филиал будет отображаться вход. Когда вы позже установите переменную Session после проверки ввода пользователя, она будет повторно и отображать ее внутри метки.