Meteor Select Box - опция выбора в зависимости от контекста данных

Question

Я пытался выяснить, как установить атрибут «selected» в опции в окне выбора и сегодня упал. Любая помощь будет оценена по достоинству.

То, что я пытаюсь выполнить: Когда пользователь выбирает опцию и хитов представить данные сохраняются в новый документ и Монго новая запись отображается на экране (эта часть работы). При обновлении браузера состояние теряется (из-за отсутствия выбранного атрибута), и поле выбора возвращается к первому варианту. Мне нужно выяснить, как установить выбранное состояние в зависимости от значения, которое пользователь сохранил на этом конкретном документе. На этой странице есть много одинаковых блоков выбора, позволяющих пользователю выбирать разные параметры для других записей.

литературы (пытались осуществить без везения):

1. Check for equality in Spacebars?

2. https://github.com/meteor/meteor/wiki/Using-Blaze#conditional-attributes-with-no-value-eg-checked-selected

3. How do I indicate 'checked' or 'selected' state for input controls in Meteor (with spacebars templates)?

выбрать шаблон коробки:

<template name="tEdit"> 
<div class="form-group"> 
    <div class="controls"> 
    {{> fFEdit}} 
    </div> 
</div> 
</template> 

выбрать шаблон вариант коробки:

<template name="fFEdit"> 
    <select class="form-control" name="fFSelect"> 
    {{#each fFSelect}} 
     <option value="{{fId}}">{{fF}}</option> 
    {{/each}} 
    </select> 
</template> 

настройки контекста данных

Template.fFEdit.helpers({ 
    fFSelect: function() { 
    var fFArray = [ 
     { fF: "foo", fId: 0 }, 
     { fF: "bar", fId: 1 }, 
     { fF: "buzz", fId: 2 } 
    ]; 
    return fFArray; 
    } 
}); 

Answer 1

Я не уверен, если это лучший ответьте на мою проблему, хотя это то, что я придумал для добавления выбранного атрибута в сохраненную опцию. Я приветствую кого-то другого с лучшим/метеорным решением для этого.

Когда пользователь нажимает на ссылку редактирования, я нахожу входные данные, которые необходимо обновить, и назначьте значения onClick. В идеале я бы предпочел, чтобы это уже было сделано на pageLoad, но чувствую, что это решение может повлиять на начальное время pageLoad.

Template.tItem.events({ 
    'click .edit-t-item': function(e) { 
    e.preventDefault(); 

    var $editTWrapper = $(e.currentTarget).next('.edit-t-wrapper'); 
    $editTWrapper.find('[name=tNEdit]').val(this.tName); 
    $editTWrapper.find('[name=fFSelect]').val(this.fFId); 
    } 
}); 

Answer 2

Если вы хотите, чтобы состояние сохраняться через браузер обновляется, вы должны быть в состоянии либо извлечь его с сервера или из чего-то вроде Meteor Session.

Вторая вещь, в которой вы нуждаетесь, - это помощник, чтобы получить выбранное состояние. Удобно, Meteor делает контекст данных доступным под this (для каждого цикла этот контекст является отдельным элементом).

Template.userEdit.helpers({ 
    userSelected: function() { 
    if(this.id === Session.get("selectedUserId")) { 
     return "selected"; 
    } 
    } 
}); 

Это предполагает, что вы установили переменную Session ранее с чем-то вроде Session.set("selectedUserId", user._id).

Затем в шаблоне:

<template name="userEdit"> 
    <select class="form-control" name="userSelect"> 
    {{#each users}} 
     <option {{userSelected}}>{{username}}</option> 
    {{/each}} 
    </select> 
</template> 

(Примечание. Выбранное состояние не может реально увидеть, осматривая DOM с элементом инспектора)