template.js

Question

我是Meteor的新手。我现在有一个带有两个引导列的流星应用程序;每个都有一个“卡片”列表，左栏中的卡片与右栏中显示的卡片具有父母关系。单击左侧的卡片，该父级的子卡片将加载到右侧列中。

对于右栏中的卡片，我想让其上的文字为contentEditable。我尝试过使用一些WYSIWYG库，这样我就可以获得一些编辑功能，并且所有这些库都以同样的方式失败。您单击要编辑的文本，它会清楚地突出显示该字段，因为它可以编辑，但您无法键入任何内容。但是......如果你切换到另一个窗口或应用程序，然后切换回来，现在光标闪烁，你可以输入。相关代码如下（在本例中，我使用的是中编辑器，但就像我说的那样，我不认为问题与此有关）。我不确定事件处理程序是否有帮助;没有它也行不通。

template.js

Template.editFrame.cards = function () {
    return ExCards.find({varId: Session.get("selectedArc")}, {sort: {sortOrder: 1}});
};

Template.exCards.events({

    'click .editable': function (evt) {
        var field = $('p.editable', evt.target.parentNode);
        field.focus();
    }
});


};

Template.exCards.rendered = function () {
    var editor = new MediumEditor(".editable");
};

template.html

<template name="editFrame">
    <div class="col-lg-10 section-exCards">
        <div class="scrollable list">
            {{#each cards}}
                {{> exCards }}
            {{/each}}
            {{#if newStoryBox }}
                {{> editStory}}
            {{/if}}
            <div class="add-button-container">
                <button class="add-button add-ex-button" id="addExCard">Add Story Item</button>
            </div>
        </div>

        {{> metadataFrame }}
    </div>
        <!--</div>-->
</template>


<template name="exCards">
    <div class="ex-card card-container item row" id="{{_id._str}}">
        <div class="item-inner">
            <div class="info col-xs-7">
                <div class="address">
                    <p class="editable" id="new_{{_id.str}}">{{name}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

Answer 1

在使用不同的contenteditable编辑器库之前，我遇到了类似的问题。所以这可能会或可能不会帮助你。

所以发生的一件事是你的Template.exCards.rendered函数被多次调用，这意味着你创建多个媒体编辑器可能会也可能不会导致这个问题。我做的是在创建一个新的MediumEditor之前检查编辑器变量。

您必须全局范围编辑器变量，以便下次渲染时您仍然可以访问它。此外，您必须在适当的时候手动销毁编辑器。

Answer 2

您通过Template.myTemplate.rendered提供的回调仅调用一次。我认为这改变了Meteor更新到版本0.8。

这是文档所说的：

当Template.myTemplate的实例时，将调用此回调一次被渲染到DOM节点并放入第一个文档时间。

因此Matt M在该问题中发布的版本开箱即用。

Meteor contentEditable字段不起作用

template.js

template.html

2 个答案: