Javascript Meteor JS：如何在渲染之间保持contenteditable字段上的光标位置？_Javascript_Meteor

Javascript Meteor JS：如何在渲染之间保持contenteditable字段上的光标位置？

javascript meteor

Javascript Meteor JS：如何在渲染之间保持contenteditable字段上的光标位置？,javascript,meteor,Javascript,Meteor,问题： // 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 Temp

问题：

// 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>

我有几个可编辑的元素。当用户关注某个元素时，会向该元素添加一个

编辑类名称。我使用Session对象来实现这一点，而不是jQuery。问题是，每次我关注元素时，它都会重新渲染，光标位置和焦点都会丢失
我试图对元素使用preserve方法
，以防止在编辑元素时对其进行更新，但无法使其正常工作。有什么建议吗
这是我的代码：
// 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>

//集合
表格=新的Meteor.集合（“表格”）；
//固定装置
if（Forms.find（）.count（）==0）{
表格.插入({
说明：“表格1”
});
表格.插入({
说明：“表格2”
});
}
if（Meteor.isClient）{
//助手
Template.forms.helpers({
editState:函数（）{
返回Session.equals（“fieldEditing”，this._id）？“editing”：“；
},
形式:function(){
返回表单。find（）；
}
});
//保存
Template.forms.preserve（['.editing']）；
//事件处理程序
Template.forms.events({
“focus.form字段”：函数（e，模板）{
e、 预防默认值（）；
Session.set（“fieldEditing”，this.\u id）；
}
});
}
//模板
测试项目
{{>形式}
{{{#每种形式}

{{description}}

{{/每个}}
这是由于Spark
未考虑应保留的contenteditable
节点a值的内容造成的。因此，每次渲染都会重置div的内容，将光标移到开头
我发现了类似的封闭问题，但我不认为在您的案例中使用{{{constant}}
区域是一个很好的解决方案
我建议：

正在尝试一个新的预览渲染引擎
使用您的特定示例在创建问题

注意，我将您的代码更改为以下代码，以便于测试：
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>

if（Meteor.isClient）{
//收藏
Forms=新Meteor.Collection（空）；
//固定装置
if（Forms.find（）.count（）==0）{
表格.插入({
说明：“表格1”
});
表格.插入({
说明：“表格2”
});
}
//助手
Template.forms.helpers({
计时器：函数（）{
return Session.get（“计时器”）；
},
形式:function(){
返回表单。find（）；
}
});
//保存
Template.forms.preserve({
“.form字段”：函数（n）{返回n.id}
});
Session.set（“计时器”+新日期（））
Meteor.setInterval（函数（）{
Session.set（“计时器”+新日期（））
},2000);
}
//模板
测试项目
{{>形式}
{{timer}}
{{{#每种形式}

{{description}}

{{/每个}}
我也有同样的问题！有什么解决方案吗？我正在用0.8.12处理jade，我遇到了这个问题。有任何更新吗？@nearpoint我会用你的例子在上创建一个问题。我不认为spacebars/blaze在重新渲染元素时会考虑内容。糟糕的是，我有一个自动保存功能，可以在用户休息时保存数据，因为重新渲染了插入符号，所以插入符号正好位于顶部！不好的用户体验。我希望他们能尽快解决这个问题。你与你提交的问题有直接联系吗？对不起，这不太清楚-你应该创建问题，并参考#171，因为这是一个回归/类似的问题