关闭内容可编辑区域的反应性(Meteor)

Question

我知道你可以在获取集合时关闭reactive: false的反应性。例如，在一个可满足的区域内，如何在集合字段中实现同样的目的？示例：

Template.documentPage.events({
  'input .document-input': (function(e) {
    e.preventDefault();

    content = $(e.target).html();
    Documents.update(this._id, {
      $set: {
        content: content
      }
    });
   }
});

<template name="documentPage">
  <div class='document-input' contenteditable='true'>{{{content}}}</div>
</template>

Answer 1

要转换辅助函数或其他反应函数的反应性，请使用Tracker.nonreactive(fn)包装您的函数。请参阅：http://docs.meteor.com/#/full/tracker_nonreactive

Answer 2

您可以将反应式数据设置为属性，并将其移动到onRendered中的html

<template name="documentPage">
  <div class='document-input' contenteditable='true' data-content='{{content}}'></div>
</template>

Template.documentPage.onRendered(function () {
  var doc = this.find(".document-input");
  doc.innerHTML = doc.dataset.content;
});

这样，将通过blaze更新data-content属性，而不是元素的文本。

安全说明：我更改了模板，使用{{content}}而不是{{{content}}}，这样它就可以用meteor进行转义，但使用了doc.innerHTML，所以元素中的内容将是“未转义的”。任何时候，当您从用户输入呈现html时，都应该确保您对其进行了杀毒，这样您就不会在站点中打开xss漏洞。

另一种方法是使用像https://github.com/UziTech/jquery.toTextarea.js这样的库将div的可编辑内容更改为文本，并使用doc.textContent代替doc.innerHTML来消除任何使用xss的可能性