Редактировать профиль в 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

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

Answer 2

Я считаю, переключаясь между входом и 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'; 
    } 
}); 

Я понимаю, что это тихий немного кода для одного поля, но он легко может быть завернутый в блок-помощник и сделанный многоразовым.