我有一组在所有模板中重复的按钮。当我点击带有content_editable类的任何部分时,我希望显示单击部分旁边的按钮。到目前为止我所做的是在会话中存储被点击部分的_id,但我正在努力解决的是在点击后我将如何实际显示按钮。
我认为我可以使用帮助器并获取存储的_id,然后检查我想要显示的按钮是否是单击部分的兄弟,然后比较兄弟姐妹是否与存储的_id具有相同的_id。这显然不起作用。
//助手
UI.registerHelper('copy', function() {
return ContentCollection.find();
});
UI.registerHelper('toggle', function() {
var tog = this.nextElementSibling;
var toggle = tog._id;
var activeElement = Session.get('activeElement');
if(activeElement == toggle) {
return true;
}
});
//活动
Template.layoutWrapper.events({
'click .content__editable': function(e) {
var clickedContainer = this._id;
Session.set('activeElement', clickedContainer);
}
});
// TEMPLATES
<body>
{{> layoutWrapper}}
</body>
<template name="layoutWrapper">
{{> mainLeft}}
{{> mainRight}}
</template>
<template name="mainLeft">
<section id="content-left" class="content">
{{#if toggle}}
{{> editControls}}
{{/if}}
{{#each copy}}
{{{content}}}
{{/each}}
</section>
</template>
<template name="mainRight">
<section id="content-right" class="content">
{{#if toggle}}
{{> editControls}}
{{/if}}
{{#each copy}}
{{{content}}}
{{/each}}
</section>
</template>
<template name="editControls">
<ul class="inline-list">
<li class="edit">edit</li>
<li class="save">save</li>
</ul>
</template>
//输出看起来像这样。
<section id="content-right" class="content">
<ul class="inline-list">
<li class="edit">edit</li>
<li class="save">save</li>
</ul>
<div class="content_editable contentEditable="false">
<p>Some text here</p>
</div>
</section>
答案 0 :(得分:0)
你可以在循环中移动#if:
{{#each copy}}
{{#if toggle}}
{{> editControls}}
{{/if}}
{{{content}}}
{{/each}}
并保留这样的toogle帮助:
UI.registerHelper('toggle', function() {
return Session.equals('activeElement', this._id);
});