[英]Edit profile name in Meteor
I am very new to Meteor. 我对流星很陌生。
I am publishing users from the server with 我正在从服务器发布用户
Meteor.publish("users", function () {
return Meteor.users.find({}, {fields: {emails: 1, profile: 1, createdAt: 1}, sort: {createdAt: -1}});
});
I am routing to a user profile with iron-router
: 我正在使用iron-router
路由到用户个人资料:
this.route('userProfile', {
path: '/users/:_id',
template: 'userProfile',
waitOn: function() {
return Meteor.subscribe('users', this.params._id);
},
data: function() {
return Meteor.users.findOne({_id: this.params._id});
},
});
I want to be able to show and edit profile name on this page. 我希望能够在此页面上显示和编辑个人资料名称。 How can I best obtain this? 我怎样才能最好地获得这个?
In my template I am showing the name with 在我的模板中,我用
<template name="userProfile">
<h1>{{#if profile.name}}{{profile.name}}{{else}}No Name{{/if}}</h1>
</template>
but the object has no name yet. 但是该对象还没有名称。 I guess I can make the header clickable with 我想我可以使标题可点击
Template.userProfile.events({
'click h1': function(e) {
// change <h1> to <input type="text">
}
});
but I'm not sure what to do now. 但我不确定现在该怎么办。
Besides, is it a good idea to start using meteor-autoform
? 此外,开始使用meteor-autoform
是个好主意吗?
I find toggling between an input and an h1 is kind of painful so I can up with another solution (The trick here is to use a hidden span to measure the width of the text so that you can resize your input at each keypress). 我发现在输入和h1之间切换是很痛苦的,因此我可以提出另一种解决方案(这里的技巧是使用隐藏的跨度来测量文本的宽度,以便您可以在每次按键时调整输入的大小)。
Template: 模板:
<template name="userProfile">
<div>
<input class="js-profile-name" value="{{profile.name}}" />
<span class="js-profile-name-holder">{{profile.name}}</span>
</div>
</template>
Style: 样式:
.js-profile-name {
/* we style our input so that it looks the same as a H1 */
line-height: 1;
font-size: 24px;
outline: none;
border: 0;
}
.js-profile-name-holder {
position: absolute;
left: -9999px;
padding: 20px;
font-size: 24px;
}
JS: JS:
Template.userProfile.onRendered(function () {
this.find('.js-profile-name').style.width = this.find('.js-profile-name-holder').offsetWidth + 'px';
});
Template.userProfile.events({
'change .js-profile-name': function (e, tmpl) {
if (!e.target.value) {
// prevent empty values
tmpl.find('.js-profile-name-holder').innerHTML = this.profile.name;
e.target.value = this.profile.name;
e.target.style.width = tmpl.find('.js-profile-name-holder').offsetWidth + 'px';
return;
}
Meteor.users.update({_id: this._id}, {
$set: {
'profile.name': e.target.value
}
});
},
'keypress .js-profile-name': function (e, tmpl) {
// resize our input at each keypress so that it fits the text
tmpl.find('.js-profile-name-holder').innerHTML = e.target.value;
e.target.style.width = tmpl.find('.js-profile-name-holder').offsetWidth + 'px';
}
});
I recognize this is quiet a bit of code for a single field, but it could easily be wrapped in a block helper and made reusable. 我知道这对于单个字段来说是安静的一些代码,但是可以很容易地将其包装在块帮助器中并使其可重用。
Template.userProfile.helpers({
/*here you can load individual user data*/
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.