得到兄弟姐妹的流星

时间:2014-11-28 13:05:39

标签: javascript meteor

我有一组在所有模板中重复的按钮。当我点击带有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>

1 个答案:

答案 0 :(得分:0)

你可以在循环中移动#if:

    {{#each copy}}
        {{#if toggle}}
            {{> editControls}}
        {{/if}}
        {{{content}}}
    {{/each}}

并保留这样的toogle帮助:

UI.registerHelper('toggle', function() {
    return Session.equals('activeElement', this._id);
});