Wert eines ausgewählten HTML-Elements reaktiv mit Meteor setzen

Ich möchte den Wert eines HTML-Elements <select> reaktiv einstellen, ohne die verschiedenen Optionen für das Element zu ändern. Ich habe eine Lösung gefunden, aber es ist nicht elegant.Wert eines ausgewählten HTML-Elements reaktiv mit Meteor setzen

Um zu testen, eine Barebone-Meteor-App mit create meteor select zu erstellen und den Inhalt der select.html und select.js Dateien wie folgt ändern:

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") 
    } 
    } 
}

Starten Sie jetzt Ihre App. In der Browser-Konsole können Sie den Wert der Variablen category Session ändern:

Session.set("category", "Animal")

jedoch das select-Element wird nicht aktualisiert, bis Sie das Etikett ändern:

Session.set("label", "category") // was "Category'

Nun ist das select-Element-Updates, und jede nachfolgende Änderung wird die category Sitzungsvariable auch das Auswahlelement aktualisieren.

Session.set("category", "Vegetable") // Now the select element updates

Ist es möglich, den gleichen Effekt direkt zu erreichen, ohne diese plumpe Workaround zu verwenden?

Quelle

2015-09-20 James Newton

Ja. Sie können es wie folgt:

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

und Helfer, die etwa wie folgt aussieht:

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

Eine bessere Möglichkeit, so etwas wie dies obwohl sein könnte:

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

Und dann können Sie Verwenden Sie this in den Helfern, um zu entscheiden, was ausgewählt ist und was nicht.

Eine andere Option ist nur Standard-jQuery verwenden, um das Auswahlfeld zu ändern. Etwas wie dieses:

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

Oder this SO answer.

Quelle

2015-09-20 12:13:09

Wenn Sie wollen, dass die Auswahl dynamisch eingestellt ich in der Regel wie diese in html

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

dann einen Lenker Helfer verwenden

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

Quelle

2018-01-31 16:12:51

Wert eines ausgewählten HTML-Elements reaktiv mit Meteor setzen

Antwort

Verwandte Themen