javascript - JS/HTML5/Meteor 如何将输入更改为标签？

Question

我有一个 html 格式的输入表单，如下所示:

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

我可以更改“占位符”值:

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

在将用户名设置为初始输入后，但我实际上想将输入更改为一个标签(假设是一个带有 strong 的 p 标签)，并将 Session.get("username") 作为其值。怎么办？

Answer 1

结合使用 react 性和模板，以 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 变量时，它将重新呈现并将其显示在标签内。