javascript - 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

使用反应性和模板的组合来实现你需要的 Meteor 方式。

模板名称.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>

模板名称.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);
    }
});

当您的模板首次呈现时，用户名助手将未定义，else 分支将显示输入。当您稍后在验证用户输入后设置 Session 变量时，它将重新呈现并在标签内显示它。

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

您可以使用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().