メテオチェック時に要素内のテキストを打ち出す

Question

メテオールを学んでいて、タスクのチェックボックスをオンにして、それがチェックされたときにJQueryがテキストを打ち切ろうとしています。私は、それが必要な方法でデータを表示するヘルパーを用意しています。また、inoutがチェックされたときに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; 
} 

次に、打ち切りたいDOM要素のclass属性内でヘルパーisCompleteを使用します。

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

このコードは時に基礎となるデータの変更、それは自動的に更新されますつまり、反応です。