2017-02-03 6 views
0

Для приложения Meteor я хочу, чтобы пользователи могли добавлять divs в столбец, нажав кнопку, причем каждая из них имеет кнопку для удаления div. Вот отрывок кода:Добавление и удаление шаблонов Meteor

<template name="MainTemplate"> 
    .... 
    <a class="btn btn-sm" class="add-dynamic"></a> 
    <div id="add-stuff-here"></div> 
    .... 
</template> 

<template name="DynamicTemplate"> 
    <div id="dynamic-{{uniqid}}"> 
     <a class="btn btn-sm delete-dynamic" name="{{uniqid}}"></a> 
    </div> 
</template> 

... и в яваскрипта файле:

Template.MainTemplate.events({ 
    'click .add-dynamic'(event) { 
    const random = String.fromCharCode(65 + Math.floor(Math.random() * 26)); 
    const uniqid = random + Date.now(); 
    Blaze.renderWithData(Template.DynamicTemplate, {uniqid: uniqid}, $("#add-stuff-here")[0]) 
    }, 
}) 

Template.DynamicTemplate.events({ 
    'click .delete-dynamic'(event){ 
     const target = event.target || event.srcElement; 
     const id = target.id; 
     console.log("Button ID: " + id); // This is null 
     new = $('#dynamic-' + id); 
     new.parentNode.removeChild(new); // Therefore, this fails 
    } 
}); 

Добавление шаблонов работ, как ожидалось, но их удаление не помогает, как идентификатор щелкнул кнопкой, как представляется, ноль.

В любом случае, я, вероятно, об этом совершенно не так (я давно не использовал Метеор и не очень хорошо его знал), и поэтому буду признателен за любые предложения относительно того, как это может быть достигнуто.

ETA: Возможный ответ предложил в комментариях включает:

UI.remove(self.view); 

... который "ожидает шаблон вынесенное с Blaze.render". Я не могу определить, как передать идентификатор шаблона, который будет удален, в функцию, которая запускается при нажатии кнопки - есть ли у кого-нибудь предложения?

+0

Возможный дубликат http://stackoverflow.com/questions/22907716/remove-inserted-template-in-meteor-0-8-0 –

+0

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

+0

Я думаю, что это прямо ответит на вопрос, дайте ему попробовать :) –

ответ

0

В конце концов я работал вокруг него, делая это:

<template name="DynamicTemplate"> 
    <input type="text" class="dynamic-input" placeholder="Some text" /> 
</template> 

Template.DynamicTemplate.events({ 
    'click .delete-dynamic'(event){ 
    inputs = $(".dynamic-input").length; 
    if (inputs > 1) { 
     const element = $(".dynamic-input")[dynamic - 1]; 
     element.parentNode.removeChild(element); 
     } 
    } 
}); 

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