Meteor

ile seçici bir HTML öğesinin değerini ayarlama HTML <select> öğesinin değerini, öğenin çeşitli seçeneklerini değiştirmeden, reaktif olarak ayarlamak istiyorum. Bir çözüm buldum ama zarif değil.Meteor

<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

select.html: test etmek

, create meteor select ile Barebone Meteor uygulama oluşturup aşağıdaki select.html içeriğini ve select.js dosyaları değiştirmek

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

Şimdi uygulamanızı başlatın. ,

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

Şimdi seçme elemanı güncellemeleri: etiketi değiştirene kadar

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

Ancak seçeneğini eleman güncelleme olmaz: tarayıcı konsolunda, category Oturum değişkenin değerini değiştirebilir ve sonraki herhangi bir değişiklik, category Oturum değişkenini ayrıca seçim öğesini güncelleyecektir.

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

Bu olumsuz çözümü kullanmadan, aynı etkiyi doğrudan elde etmek mümkün mü?

kaynak

2015-09-20 James Newton

Evet.

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

Daha iyi bir yol olsa böyle bir şey olabilir: şuna benzer

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

Ve yardımcıları şu şekildedir: Bunu yapabilirsiniz

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

Sonra yapabilirsiniz Neyin seçilip neyin seçilmediğine karar vermek için yardımcılara this kullanın.

Seçme kutusunu değiştirmek için başka bir seçenek yalnızca standart jQuery'yi kullanıyor. Böyle bir şey:

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

Ya this SO answer.

kaynak

2015-09-20 12:13:09

Seçim dinamik genellikle html o zaman bu

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

gibi bir gidon yardımcısı kullanmak set istiyorsanız

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

kaynak

2018-01-31 16:12:51

cevap

İlgili konular