Задайте стойност на избран HTML елемент реактивно с Meteor

Искам да задам стойността на HTML <select> елемент реактивно, без да променям различните опции за елемента. Намерих решение, но не е елегантно.

За да тествате, създайте barebones приложение Meteor с create meteor select и променете съдържанието на файловете select.html и select.js на следното:

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

Сега стартирайте приложението си. В конзолата на браузъра можете да промените стойността на променливата category Session:

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

Въпреки това избраният елемент няма да се актуализира, докато не промените етикета:

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

Сега избраният елемент се актуализира и всяка последваща промяна на променливата category Session също ще актуализира избрания елемент.

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

Възможно ли е да постигнете същия ефект директно, без да използвате това тромаво решение?


reactive-programming meteor html-select
person James Newton    schedule 20.09.2015    source източник

Отговори (2)


arrow_upward
8
arrow_downward

да Можете да го направите по следния начин:

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

И помощници, които изглеждат така:

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

По-добър начин обаче може да е нещо подобно:

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

След това можете да използвате this в помощниците, за да решите какво е избрано и какво не.

Друг вариант е просто да използвате стандартен jQuery за промяна на полето за избор. Нещо като това:

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

Или този SO отговор.

person Eliezer Steinbock    schedule 20.09.2015

arrow_upward
0
arrow_downward

Ако искате селекцията да се задава динамично, обикновено използвам помощник на кормилото като този

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

след това в html

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