Meteor Klopftext im Element, wenn überprüft

Question

Ich lerne Meteor und ich versuche, eine Box für eine Aufgabe zu überprüfen und wiederum JQuery den Text streichen, wenn es überprüft wird. Ich habe Helfer an Ort und Stelle, die zeigen mir Daten, wie ich es will und auch Event-Handler, so dass wenn das Inout überprüft wird aktualisiert es die db.

Was ich will, ist in der Lage zu testen, ob die db sagt "abgeschlossen" und wenn ja, streichen Sie die ein Tag-Text. Ich habe einen Helfer dafür geschrieben, bin mir aber nicht sicher, wo in der Vorlage der Helfer steckt. Ich würde auch gerne wissen, ob zum Zeitpunkt der Überprüfung der Box und der Aktualisierung der Datenbank die Vorlage aktualisiert wird, wenn sich die Datenbank ändert.

Hier ist mein Code:

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

Und hier ist der Helfer für die Vorlage:

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

Der "Meteor Way", dies zu tun ist, wie (ohne folgt müssen JQuery verwenden):

Zuerst eine sehr einfache CSS

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

Verwenden Sie dann den Helper isComplete innerhalb des class Attributs des DOM-Elements, das durchgestrichen werden soll.

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

Dann kehrt das Make-Vorlage Helfer den Klassennamen für Text streichend, wenn Aufgabe abgeschlossen ist:

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

Dieser Code ist reaktive, wird es automatisch aktualisiert das heißt, wenn die Datenänderungen zu Grunde liegen.