Meteor/Iron路由器-何时何地运行JS以交换到所见即所得

Meteor/Iron Router - When/Where to run JS to swap to WYSIWYG

本文关键字:JS 交换 所见即所得 运行 何时何地 Iron 路由器 Meteor      更新时间:2023-09-26

我正试图找出运行jQuery插件的最佳位置,该插件将替换文本区域(使用反应值)。在为文本区域分配了值之后,需要调用它。

我试过各种地方。我尝试过的最正确的地方似乎是模板onAfterAction回调中的Meteor.defer。大约95%的时间都是这样。

类似这样的东西:

MyController = RouteController.extend({
     waitOn:  function () {
        return Meteor.subscribe('post', this.params._id);
     },
     onAfterAction: function () {
        Meteor.defer(function () {
            $('.make-wysiwyg').wysiwyg();
        });
    }
});

然而,偶尔情况并非如此。如果我开始在帖子之间快速切换,偶尔会有一个帖子在textarea有数据之前运行,并且无法显示属性(它将为空,因为它需要在调用wysiwyg()之前的值)。

我已经消除了wysiwyg()函数本身作为罪魁祸首,将该行替换为:

$('.make-wysiwyg').each(function () {console.log($(this).val())});

我可以清楚地看到,它会在没有明显原因的情况下打印空的值字段。

我不确定模板或publish()函数是否是罪魁祸首,所以我也会提供它们。

非常感谢任何想法。

模板:

<template name="adminPostsEdit">
    <h1>Edit Post</h1>
    <form id="edit-post" class="{{isNewClass}}" method="post">
        <label for="post-title">Title</label>
        <input id="post-title" value="{{post.title}}">
        <label for="post-slug">Slug</label>
        <input id="post-slug" value="{{post.slug}}">
        <label for="post-content">Content</label>
        <textarea id="post-content" class="make-wysiwyg">{{post.content}}</textarea>
        <label for="post-excerpt">Excerpt</label>
        <textarea id="post-excerpt" class="make-wysiwyg">{{post.excerpt}}</textarea>
        {{#if post.published}}
        <button value="save">Save</button>
        <button value="unpublish">Unpublish</button>
        {{else}}
        <button value="save">Save Draft</button>
        <button value="publish">Publish</button>
        {{/if}}
        <button value="cancel">Cancel</button>
    </form>
</template>

publish():

Meteor.publish('post', function (id) {
    return Posts.find({_id: id});
});

帮助者:

Template.adminPostsEdit.helpers({
    post: function () {
        return Posts.findOne();
    },
    isNewClass: function () {
        return !this.id ? 'new' : '';
    }
});

您应该在模板的渲染函数中执行此操作。

Template.adminPostsEdit.rendered = function() {
    $('.make-wysiwyg').wysiwyg();
})