添加和刪除流星模板

對於流星應用程序，我希望用戶能夠通過單擊按鈕將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

添加和刪除流星模板

回答

相關問題