在Meteor中编辑配置文件名称

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*/
});