Desidero impostare il valore di un elemento HTML <select>
in modo reattivo, senza modificare le varie opzioni per l'elemento. Ho trovato una soluzione, ma non elegante.Imposta il valore di un elemento HTML selezionato in modo reattivo con Meteor
Per provare, creare una meteora app barebone con create meteor select
e cambiare il contenuto della select.html e file select.js al seguente:
select.html
<body>
{{> select}}
</body>
<template name="select">
<label for="select">{{category}}</label>
<select id="select">
<option value='' disabled selected style='display:none;'>Select...</option>
<option value="Animal">Animal</option>
<option value="Vegetable">Vegetable</option>
<option value="Mineral">Mineral</option>
</select>
</template>
select.js
if (Meteor.isClient) {
Session.set("category", "")
Session.set("label", "Category")
Template.select.onRendered(function() {
setSelectValue()
})
Template.select.helpers({
category: function() {
setSelectValue()
return Session.get("label")
}
});
function setSelectValue() {
var select = $("#select")[0]
if (select) {
select.value = Session.get("category")
}
}
}
Ora avvia la tua app. Nella console del browser, è possibile modificare il valore della variabile category
Sessione:
Session.set("category", "Animal")
Tuttavia, l'elemento di selezione non verrà aggiornato fino a quando si cambia l'etichetta:
Session.set("label", "category") // was "Category'
Ora i selezionare aggiornamenti elemento, e ogni modifica successiva della variabile Session aggiornerà anche l'elemento select.
Session.set("category", "Vegetable") // Now the select element updates
E 'possibile ottenere lo stesso effetto direttamente, senza l'utilizzo di questa soluzione goffa?