javascript - meteor JS : What is the best way to store states for a specific template instance?

Question

我正在学习 Meteor JS 中的 session 和 react 数据源。它们非常适合设置全局 UI 状态。但是，我无法弄清楚如何将它们限定为模板的特定实例。

这是我正在尝试做的事情

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

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

这是我目前的代码

// 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 会针对每个实例进行聚焦，而不仅仅是正在编辑的实例。如何使只有正在编辑的那个得到焦点？

Answer 1

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

数据可能只是在 editState 的 Session 中使用的键。

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

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

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

然后将它插入到你的模板中

{{{formWithOptions 'editState-topForm'}}}(注意三元组 {, })

接下来，将引用从 Session.x('editState') 更改为 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 中应该可以更好地支持编写您自己的小部件。这应该可以更好地控制这类事情。