2014-09-18 73 views
1

我有一個表有幾個表中的行,所以我已經創建了哪些更新myCollection被點擊特定td元素時,這工作正常click事件添加類到表元素。我想要做的是顯示引導程序「打勾」以顯示單擊時此元素爲「活動」。流星:在單擊事件

如果我在控制檯上運行$('.activate').addClass('glyphicon glyphicon-ok');,它將類添加到所有具有.activate類的元素,而不是觸發事件的類。我也可以在下面的函數中運行這條線,結果相同。

我似乎無法用下面的代碼在所有得到這個工作:

'click .activate': function (event, template) { 

    var id=event.target.getAttribute("data-id"); 

     myCollection.update({_id: id}, {$set: {status: "active"}}); 

     // I've tried variations of the line below with no success 
     $(this).closest("td").addClass("glyphicon glyphicon-ok"); 

} 

此外,當頁面重新加載,我會想顯示在正確的位置「滴」。我不知道如何做到最好。我不能這樣做,例如:

{{#each myCollection}} 
    {{#if status=="active"}} 
    <p>display stuff</p> 
    {{/if}} 
{{/each}} 

任何想法,我可以得到這個工作?

感謝提前:)

回答

4

裏面的事件處理程序的,this是被點擊,而不是元素本身的元素的上下文。更「流行」的方式是使用反應性而不是jQuery來更新DOM。

<template name="table"> 
    {{#each myCollection}} 
    {{> tr}} 
    {{/each}} 
</template> 

<template name="tr"> 
    <td class="activate">Activate</td> 
    <td> 
    {{#if active}} 
    <span class="glyphicon glyphicon-ok"></span> 
    {{/if}} 
    </td> 
</template> 
Template.table.myCollection = function() { 
    return myCollection.find(); 
}; 

Template.tr.active = function() { 
    return this.status === "active"; 
}; 

Template.tr.events({ 
    'click .activate': function (event, template) { 
    myCollection.update(this._id, {$set: {status: "active"}}); 
    } 
}); 
+0

尼斯一個尼爾,那非常有意義!我會放棄:)謝謝! – user1532669 2014-09-20 16:41:59

+0

工作完美,謝謝:) – user1532669 2014-09-20 17:44:48

0

如果你在一個持續的狀態(這似乎是這裏的情況)工作,尼爾的答案是要走的路。

如果你只是需要一些暫時的界面效果,可以使用下面的jQuery:

$(event.target).addClass("glyphicon glyphicon-ok"); 

(幾乎相同的代碼,你沒有嘗試,但隨着$(this)$(event.target)代替)