Imposta il valore di un elemento HTML selezionato in modo reattivo con Meteor

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?

fonte

2015-09-20 James Newton

Sì. Si può fare come segue:

<select id="select"> 
    <option value="Animal" {{animalSelected}}>Animal</option> 
    <option value="Vegetable" {{vegetableSelected}}>Vegetable</option> 
    <option value="Mineral" {{mineralSelected}}>Mineral</option> 
    </select>

e aiutanti che sembra qualcosa di simile:

Template.select.helpers({ 
    animalSelected: function() { 
     return (someCondition === true) ? 'selected' : ''; 
    }, 
    vegetableSelected: function() { 
     return (someOtherCondition) ? 'selected' : ''; 
    } 
    });

Un modo migliore potrebbe essere qualcosa di simile a questo, però:

<select id="select"> 
    {{#each options}} 
     <option value="{{value}}" {{selected}}>{{label}}</option> 
    {{/each}} 
    </select>

e poi si può utilizzare this negli helper per decidere cosa viene selezionato e cosa no.

Un'altra opzione è solo utilizzando jQuery standard per modificare la casella di selezione. Qualcosa di simile a questo:

$('[name=options]').val(3);

Or this SO answer.

fonte

2015-09-20 12:13:09

Se si desidera che la selezione impostata dinamicamente io di solito uso un aiutante manubrio come questo

Template.newtask.helpers({ 
    filler: function(element){ 
    return Session.get(element); 
    } 
});

poi in html

<select class="browser-default" id="selectedService" name="jobtype"> 
    <option id="zero" value="{{filler 'type'}}">{{filler 'type'}}</option>

fonte

2018-01-31 16:12:51

Imposta il valore di un elemento HTML selezionato in modo reattivo con Meteor

risposta

Problemi correlati