javascript - Meteor 正确常量使用

Question

我在文本区域使用所见即所得包 (bootstrap3-wysiwyg5)。该包按预期工作，但每当呈现页面时，用粗体、斜体等修改文本的菜单就会成倍增加。

Here's what it looks like

我认为使用 {{#constant}} block 会阻止它，但它似乎没有做任何事情。

那么，两个问题:

1. 我在这种情况下是否错误地使用了 {{#constant}} block ？
2. 如果没有，关于停止这种重新渲染情况有什么建议吗？

代码如下:

要使用所见即所得编辑器，您只需将它添加到您想要使用的任何文本区域。在客户端我有:

Template.announcements.rendered = function(){
  $('#announcement_message').wysihtml5({
    "font-styles": false, //Font styling, e.g. h1, h2, etc. Default true
    "emphasis": true, //Italics, bold, etc. Default true
    "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
    "html": false, //Button which allows you to edit the generated HTML. Default false
    "link": true, //Button to insert a link. Default true
    "image": false, //Button to insert an image. Default true,
    "color": false //Button to change color of font
  });;
};

然后在我的模板中:

{{#constant}}
  <textarea id="announcement_message" class="form-control" name="message" type="text"></textarea>
{{/constant}}

Answer 1

constant block 通常以这种方式工作，但您的问题在于渲染函数实际运行了多少次。如果您将 console.log() 放入您的 Template.announcements.rendered()，我敢打赌它会出现 4 次。

这在 Meteor 的新渲染系统 Blaze 中不会成为问题。他们正在解决这个问题 here .

Ben McMahen 有一个伟大的post关于 Meteor 的渲染回调，在其中，他有一个建议的代码块，用于确保某些东西只运行一次，它是通过将 rendered 属性附加到 Template 实例，如下所示:

Template.announcements.rendered({
   if(!this.rendered) {
      // This code only runs once
      $('#announcement_message').wysihtml5({
         "font-styles": false, //Font styling, e.g. h1, h2, etc. Default true
         "emphasis": true, //Italics, bold, etc. Default true
         "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
         "html": false, //Button which allows you to edit the generated HTML. Default false
         "link": true, //Button to insert a link. Default true
         "image": false, //Button to insert an image. Default true,
         "color": false //Button to change color of font
      });;
      this.rendered = true;
   }
});