Получить sibling _id meteor

У меня есть набор кнопок, которые повторяются во всех моих шаблонах. Когда я нажимаю на любой из разделов с классом content_editable, я хочу, чтобы кнопки рядом со щелчком отображались. То, что я сделал до сих пор, - это хранить _id в разделе с щелчком в сеансе, но то, с чем я борюсь, - это то, как я на самом деле покажу кнопки после щелчка.Получить sibling _id meteor

Я подумал, что могу использовать помощник и получить сохраненный _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); 
    } 

});

// ШАБЛОНЫ

<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>

источник

2014-11-28 wind_kind

Это трудно понять ваш requrirement..You есть редактируемой области контента, и если вы нажмете редактируемую область, которую хотите отобразить рядом с ней? Кнопка предназначена для сохранения изменений, которые я думаю – Rajanand02

Да. каждый

имеет набор кнопок (редактирование и сохранение). Когда я нажимаю на раздел, он должен показывать кнопки. Но не все кнопки в каждом

просто кнопки, которые находятся в том же разделе, на который была нажата кнопка. Надеюсь, это имеет смысл. –

Я отредактировал свой вопрос, чтобы показать, какой результат каждого раздела будет для того, чтобы сделать его более понятным. –

Вы можете перемещать #if внутри цикла:

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

И оставить Toogle помощника, как это:

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

источник

2014-11-28 15:00:22 user3557327

Это понравилось. –

Получить sibling _id meteor

ответ

Смежные вопросы