添加和删除流星模板

对于流星应用程序，我希望用户能够通过单击按钮将div添加到列，每个按钮都有一个按钮来删除div。下面的代码的摘录：添加和删除流星模板

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

...在JavaScript文件：

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 
    } 
});

添加模板，按预期工作，但删除它们失败的点击按钮的ID似乎是零。

在任何情况下，我可能会以完全错误的方式来解决这个问题（我很久没有使用过流星，反正也不太了解它），所以，这可能会完成。

ETA：在评论中提出的可能的答案包括：

UI.remove(self.view);

......其中 “期待与Blaze.render表述的模板”。我无法确定如何将要移除的模板标识传递给在按钮点击上运行的功能 - 有没有人有任何建议？

来源

2017-02-03 knirirr

可能的重复http://stackoverflow.com/questions/22907716/remove-inserted-template-in-meteor-0-8-0 –

不是重复的，虽然链接的问题可能有助于确定解决方案。 – knirirr

我认为它直接回答你的问题，给它一个尝试:) –

在我工作围绕它通过这样的结尾：

<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的问题。

来源

2017-02-07 10:34:15 knirirr

添加和删除流星模板

回答

相关问题