为什么我的 contenteditable div 的内容消失了？答案

【问题标题】：Why is the content of my contenteditable div disappearing?为什么我的 contenteditable div 的内容消失了？
【发布时间】：2014-03-27 21:10:25
【问题描述】：

代码：

post_page.js：

Template.postPage.events({
 // Updating a post
 'submit form': function(e) {
    e.preventDefault();

    var post = {
      title: $(e.target).find('[name=title]').val(),
      content: $(e.target).find('[name=content]').val()
    };

    Posts.update(this._id, {$set: post});
  },

  'click .move-up': function(e) {
    // Moving up a post
    e.preventDefault();

    var prevPost = Posts.findOne({position: this.position - 1});

    if (prevPost) {
      Posts.update(prevPost._id, {$set: {position: prevPost.position + 1}});
      Posts.update(this._id, {$set: {position: this.position - 1}});
    }
  },

(...)

Template.postPage.rendered = function() {
  // Plugin to turn the text area into a contenteditable div
  var editor;
  $(function() {
   editor = new Simditor({
    textarea: $("#input-content"),
    placeholder: "...",
    pasteImage: true,
    toolbar: ["title", "bold", "italic", "underline", "link", "image", "indent", "outdent"],
    upload: {
      url: "/upload"
    }
  });

post_page.html：

<template name="postPage">
  <div class="posts">
    <div class="post">
      <div class="post-content">
        <span>title: {{title}}, position: {{position}}</span>
        <a class="move-up" href="javascript:;">Move Up</a>
        <a class="move-down" href="javascript:;">Move Down</a>
        <a href="{{pathFor 'postPage'}}">See Post</a>
        <a class="save-file" href="javascript:;">Save Post</a>
      </div>
    </div>
  </div>

  <form class="form" role="form">
    <div class="form-group">
      <label for="exampleInputEmail1">Title</label>
      <input name="title" type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email" value="{{title}}">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Content</label>
      <textarea name="content" class="form-control" rows="3">{{content}}</textarea>
    </div>
    <button type="submit" class="btn btn-default submit">Submit</button>   </form> </template>

是一个单页应用程序，一切正常，但由于某种原因，如果我 move up 和 post 不是当前显示的内容，则 contenteditable div 的内容会消失（textarea 中的内容仍然存在并且它如果我重新渲染页面就会回来）：

这可能是什么原因造成的？如何解决？

【问题讨论】：

标签： javascript html meteor

【解决方案1】：

向上/向下移动帖子会导致模板完全重新渲染，我怀疑因为 simditor 预计 DOM 会持续存在，所以它要么不会在 @987654324 上重新运行 @ 或在 Meteor 的 preserve-inputs 包重新填充 textarea 之前运行。

您可以尝试通过在@987654321 中包装重新渲染敏感区域（至少是textarea 和可能由simditor 生成的完整DOM）来解决该问题（直到Meteor 启动Blaze 模板引擎） @。如果您知道要保留的确切 DOM 元素，那么您也可以使用preserve to prevent them from being re-rendered。

【讨论】：