Meteor Ändern der Elementklasse in den Wert von HTML

Question

Ich lerne Meteor und baue eine App selbst zu tun. 90% komplett, aber eine letzte Sache hängt mich auf.

Ich konnte die Task-Klasse ändern, wenn die Aufgabe 'aktiviert' ist. Jetzt versuche ich die Farbe der Aufgabe abhängig von der 'Priorität' zu ändern. Der Helfer, den ich für die Vorlage verwende, ist:

});

und hier ist ein Teil des Vorlagencodes, der zutrifft.

<a href="#" 
      class="js-update-task-form {{isComplete}} {{isPriority}}" > 
      {{task}} 
     </a> 

Die isProperty ist diejenige, die nicht richtig funktioniert. Wenn die Seite geladen wird, wird dem Element nicht die richtige Klasse zugewiesen. Wenn ich jedoch die Aufgabe aktualisiere, t die "Priorität" ändern, wird die Klasse in diejenige geändert, die vor der Änderung dort war.

Meine Frage ist. Wie kann ich den Wert, der dem '#prioritySet' html zugewiesen ist, erhalten und als Element dem Element zuweisen?

Ich habe versucht, es in eine fertige Funktion und das hat nicht funktioniert.Ich habe auch versucht, eine Vorlage Name .Rendered-Funktion und das hat überhaupt nicht funktioniert.

jede Hilfe wäre toll. Vielen Dank.

Answer 1

Ich habe eine Lösung gefunden. Ich weiß nicht, warum ich vorher nicht daran gedacht habe.

Im Helfer musste ich nur 'return this.priority' aus dem mongodb Feld, so dass der Code jetzt so liest.

Template.item.helpers({ 
isComplete: function() {// Set class according to status 
    return this.checked ? 'complete' : ''; 
}, 
isChecked: function() { 
    return this.checked ? 'checked' : false; 
}, 
isPriority: function(){ 
    return this.priority; 
} 

});

Vielen Dank für alle, die in Lösung gesucht haben.

Answer 2

Ich sehe, Sie haben dies beantwortet, indem Sie geändert haben, wie Sie die Priorität laden. Für eine Erklärung dessen, was in Ihrer ursprünglichen Frage passiert, rufen Sie jedoch den Helper isPriority Ihrer Vorlage auf, der wiederum jQuery verwendet, um auf das DOM zuzugreifen, bevor das DOM tatsächlich vollständig gerendert wurde. Dies bedeutet $('#prioritySet').html() wird undefined zurückgeben. Nach dem Laden des DOM wird der Template-Helper isPriority nicht erneut aufgerufen, da er keine reaktive Datenquelle nutzt.

Ein alternativer Ansatz (für Ihre ursprüngliche Frage) könnte sein, nur auf das DOM zu verweisen, um den #prioritySet Wert zu erhalten, nachdem das DOM vollständig geladen wurde, und speichern dieses Ergebnis in einem ReactiveVar. Sie können diese ReactiveVar in Ihrem isPriority Helfer zurückgeben, der Ihren Helfer reaktiv macht. Wenn die ReactiveVar angepasst wird, wird Ihre Benutzeroberfläche aktualisiert. Hier ist ein schnelles Beispiel dafür:

1) Stellen Sie sicher, dass Sie das reactive-var Paket installiert haben: meteor add reactive-var.

2) Mustervorlage:

Template.item.onCreated(function onCreated() { 
    this.prioritySet = new ReactiveVar(); 
}); 

Template.item.onRendered(function onRendered() { 
    this.autorun(() => { 
    this.prioritySet.set($('#prioritySet').html().trim()); 
    }) 
}); 

Template.item.helpers({ 
    ... 
    isPriority() { 
    return Template.instance().prioritySet.get(); 
    }, 
    ... 
});