Метеор Вычеркнутый текст в элементе при проверке

Question

Я изучаю Метеор, и я пытаюсь проверить коробку для задачи и, в свою очередь, JQuery вычеркнуть текст, когда он установлен. У меня есть помощники, которые показывают мне данные так, как я хочу, и обработчик событий, чтобы при проверке inout он обновил db.

Я хочу, чтобы проверить, если db говорит «завершено», и если так вычеркнуть текст тега. Я написал помощника, чтобы сделать это, но я не уверен, где в шаблоне поставить помощника. Я также хотел бы знать, есть ли во время проверки флажка и обновляемого db шаблон возвращается, когда происходит изменение в db.

Вот мой код:

<template name="item"> 
<div class="left" style="border-bottom:1px solid lightslategray;border-radius:.2em;"> 
    <div class="left"><!--left--> 
     <li> 
      <input class="items js-checked" id="checked" type="checkbox"> 
     </li> 
     <li> 
      <a href="#" class=" items js-update-task-form js-complete"> 
       {{task}} 
      </a> 
     </li> 

     <div class="clear"></div> 
    </div> 
    <div class=" right "><!--right--> 
     <li class="items"><span class="label-position due">{{due}}</span></li> 
     <li><span class="label label-info items priority-position {{priority}}" 
        id="{{priority}}">{{priority}}</span></li> 
     <li> 
      <button type="button" class="label label-info trash js-delete-task"><span 
        class="glyphicon glyphicon-remove"></span></button> 
     </li> 
    </div> 
    <!--<div class="clear"></div>--> 
</div> 

И здесь не помощник для шаблона:

items: function() { 
    var priority = $("#priority_sorter").val(); 

    /// TODO fix so this can be sorted by 'completed' as well 

    var priority_val = Session.get('priority'); 
    var user = Meteor.user()._id; 
    /// Filter by Priority 
    if (priority_val === "All Tasks") { 
     //console.log("First IF priority set to ", priority_val); 
     return Items.find(); 

    } else { 
     //console.log("Else statement priority value is "+ priority_val+ ". With User ID "+ user); 
     return Items.find({owner: user, "priority": priority_val}, {sort: {"created": -1}}); 
    } 
}, 
isComplete: function(){ 
    var task = Items.thisId.checked; 
    if(Items.thisId.checked === 'complete'){ 
     console.log("Checked confirmed for "+ task); 
     $('.js-complete').wrap("<strike>"); 
    } 
}, 

Answer 1

"Метеор путь", чтобы сделать это следующим образом (с не необходимо использовать JQuery):

Первый очень простой CSS

.completed{ 
    text-decoration: line-through; 
} 

Затем используйте вспомогательный элемент isComplete в атрибуте class элемента DOM, который вы хотите вычеркнуть.

<template name="item"> 
    <div class="left" style="border-bottom:1px solid lightslategray;border-radius:.2em;"> 
    <div class="left"><!--left--> 
     <li> 
     <input class="items js-checked" id="checked" type="checkbox"> 
     </li> 
     <li> 
     <a href="#" class=" items {{isComplete}}"> 
      {{task}} 
     </a> 
     </li> 

     <div class="clear"></div> 
    </div> 
    <div class=" right "><!--right--> 
     <li class="items"> 
     <span class="label-position due">{{due}}</span> 
     </li> 
     <li> 
     <span class="label label-info items priority-position {{priority}}" id="{{priority}}">{{priority}}</span> 
     </li> 
     <li> 
     <button type="button" class="label label-info trash js-delete-task"> 
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
     </li> 
    </div> 
    <!--<div class="clear"></div>--> 
    </div> 
</template> 

Затем помощник шаблон сделает возвращает имя класса для вычеркивать текст, если задача выполнена:

Template.item.helpers({ 
    isComplete: function(){ 
    // This would represent the current item being iterated over 
    return this.checked ? 'completed' : ''; 
    } 
}); 

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