Meteor JS：存储特定模板实例状态的最佳方法是什么？

我正在学习 Meteor JS 中的会话和反应式数据源。它们非常适合设置全局 UI 状态。但是，我不知道如何将它们的范围限制到模板的特定实例。

这就是我想做的

我的页面上有多个可内容编辑的元素。每个下面都有一个“编辑”按钮。当用户单击“编辑”按钮时，它应该聚焦在该元素上，并显示“保存”和“取消”按钮。

如果用户单击“取消”，则所有更改都会被消除，并且模板实例应使用原始内容重新呈现。

这是我到目前为止的代码

// Helper
Template.form.helpers({
  editState: function() {
    return Session.get("editState");
  }
});

// Rendered
Template.form.rendered = function(e){
  var $this = $(this.firstNode);
  var formField = this.find('.form-field');
  if (Session.get("editState")) formField.focus();
};

// Event map
Template.form.events({
  'click .edit-btn' : function (e, template) {
    e.preventDefault();
    Session.set("editState", "is-editing");
  },

  'click .cancel-btn' : function (e, template) {
    e.preventDefault();
    Session.set("editState", null);
  },
});

// Template
<template name="form">
  <div class="{{editState}}">
    <p class="form-field" contenteditable>
      {{descriptionText}}
    </p>
  </div>
  <a href="#" class="edit-btn">Edit</a>
  <a href="#" class="save-btn">Save</a>
  <a href="#" class="cancel-btn">Cancel</a>
</template>


// CSS
.edit-btn
.cancel-btn,
.save-btn {
  display: inline-block;
}

.cancel-btn,
.save-btn {
  display: none;
}

.is-editing .cancel-btn,
.is-editing .save-btn  {
  display: inline-block;
}

问题

如果我有多个实例Form模板，那么.form-field专注于每一项，而不仅仅是正在编辑的一项。如何使只有正在编辑的内容获得焦点？

您可以使用以下方式渲染模板data，它基本上只是插入到页面时传递给它的对象。

数据可能只是在应用程序中使用的关键Session for editState.

例如，渲染模板Template.form({editStateKey:'editState-topForm'})

你可以制作一个车把助手，例如，

Handlebars.registerHelper('formWithOptions', 
  function(editStateKey){
    return Template.form({editStateKey:editStateKey})
});

然后将其插入到您的模板中

{{{formWithOptions 'editState-topForm'}}}（注意三重{, })

接下来，更改引用Session.x('editState') to Session.x(this.editStateKey)/ Session.x(this.data.editStateKey)

Template.form.helpers({
  editState: function() {
    return Session.get(this.editStateKey);
  }
});

// Rendered
Template.form.rendered = function(e){
  var $this = $(this.firstNode);
  var formField = this.find('.form-field');
  if (Session.get(this.data.editStateKey)) formField.focus();
};

// Event map
Template.form.events({
  'click .edit-btn' : function (e, template) {
    e.preventDefault();
    Session.set(this.editStateKey, "is-editing");
  },

  'click .cancel-btn' : function (e, template) {
    e.preventDefault();
    Session.set(this.editStateKey, null);
  },
});

注意：如果您正在使用iron-router它有额外的 api 用于传递data到模板。

注2：在meteor 1.0中应该有更好的支持编写您自己的小部件。这应该可以更好地控制此类事情。