Question

问题：

我有几个满足的要素。当用户关注元素时，会向元素添加editing类名。我使用Session对象来做这个，而不是jQuery。问题是，每当我专注于元素时，它就会重新渲染，光标位置和焦点都会丢失。

我正在尝试在元素上使用保留method以防止在编辑元素时更新它，但无法使其工作。有什么建议吗？

这是我的代码：

// Collection
Forms = new Meteor.Collection('forms');

// Fixtures
if (Forms.find().count() === 0) {
  Forms.insert({
    description: "form 1"
  });

  Forms.insert({
    description: "form 2"
  });
}

if (Meteor.isClient) {

  // Helpers
  Template.forms.helpers({
    editState: function() {
      return Session.equals("fieldEditing", this._id) ? "editing" : "";
    },

    forms: function() {
      return Forms.find();
    }
  });

  // Preserve
  Template.forms.preserve(['.editing']);

  // Event handler
  Template.forms.events({
    'focus .form-field' : function (e, template) {
      e.preventDefault();
      Session.set("fieldEditing", this._id);
    }
  });
}

// Template

<head>
  <title>testproject</title>
</head>

<body>
  {{> forms}}
</body>

<template name="forms">
  {{#each forms}}
    <p class="{{editState}} form-field" contenteditable>
      {{description}}
    </p>
  {{/each}}
</template>

Answer 1

这是由Spark未考虑应保留的contenteditable节点value的内容引起的。因此，每个渲染都会重置div的内容，将光标移动到开头。

我发现类似https://github.com/meteor/meteor/issues/171的封闭式问题，但我不认为在您的情况下使用{{#constant}}区域是一个很好的解决方案。

我建议：

尝试使用其中一个新的预览渲染引擎。
使用您的具体示例在https://github.com/meteor/meteor创建问题。

注意，我将您的代码更改为以下内容以便更轻松地进行测试：

if (Meteor.isClient) {    
  // Collection
  Forms = new Meteor.Collection(null);

  // Fixtures
  if (Forms.find().count() === 0) {
    Forms.insert({
      description: "form 1"
    });

    Forms.insert({
      description: "form 2"
    });
  }

  // Helpers
  Template.forms.helpers({
    timer: function(){
      return Session.get("timer");
    },
    forms: function() {
      return Forms.find();
    }
  });

  // Preserve
  Template.forms.preserve({
    ".form-field":function(n){return n.id}
  });

  Session.set("timer",+new Date())
  Meteor.setInterval(function(){
          Session.set("timer",+new Date())
  },2000);

}

// Template

<head>
  <title>testproject</title>
</head>

<body>
  {{> forms}}
</body>

<template name="forms">
  {{timer}}
  {{#each forms}}
    <p class="form-field" contenteditable id="form-{{_id}}">
      {{description}}
    </p>
  {{/each}}
</template>

Meteor JS：如何在渲染之间的可信区域上保留光标位置？

1 个答案: