Question

我是Meteor的新手。

我正在使用

从服务器发布用户

Meteor.publish("users", function () {
    return Meteor.users.find({}, {fields: {emails: 1, profile: 1, createdAt: 1}, sort: {createdAt: -1}});
});

我使用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});
  },
});

我希望能够在此页面上显示和编辑个人资料名称。我怎样才能最好地获得这个？

在我的模板中，我用

显示名称

<template name="userProfile">
  <h1>{{#if profile.name}}{{profile.name}}{{else}}No Name{{/if}}</h1>
</template>

但该对象尚未命名。我想我可以用

点击标题

Template.userProfile.events({
  'click h1': function(e) {
    // change <h1> to <input type="text">
  }
});

但我现在不知道该怎么做。

此外，开始使用meteor-autoform？

是个好主意

Answer 1

我发现在输入和h1之间切换是一种痛苦，所以我可以使用另一种解决方案（这里的技巧是使用隐藏的跨度来测量文本的宽度，以便您可以在每个按键时调整输入的大小）。

模板：

<template name="userProfile">
  <div>
    <input  class="js-profile-name" value="{{profile.name}}" />
    <span class="js-profile-name-holder">{{profile.name}}</span>
  </div>
</template>

风格：

.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：

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';
  }
});

我认识到单个字段的代码是安静的，但它可以很容易地包含在块帮助器中并且可以重复使用。

Answer 2

Template.userProfile.helpers({
  /*here you can load individual user data*/
});

在Meteor中编辑个人资料名称

2 个答案: