Сохранение входных значений в реактивных переменных (Meteor)

Question

Я использую реактивные вары для управления видимостью моих полей input, по выбору пользователя select. Но когда я выбираю один option, напишите что-нибудь на показанном входе, затем перейдите ко второму варианту, и, наконец, когда я вернусь к первому, вход value исчезнет. Есть ли способ сохранить эти данные до тех пор, пока не будет нажата кнопка confirm для подтверждения после того, как все значения полей будут сохранены во всех параметрах?

Вот две входные группы, которые отображаются, когда опция:

<template name="addTour"> 
    <label class="control-label col-xs-4" for="tour-dropdown">Программа</label> 
<div class="dropdown col-xs-8 form-group form-horisontal"> 
    <select class="form-control" id="tour-dropdown"> 
     <option value="a">A</option> 
     <option value="b">B</option> 
    </select> 
</div> 
{{#if a}} 
<div class="container-fluid"> 
{{> textfield label='a option' id='transfer-city-from'}} 
{{> confirm add='a option'}} 
</div> 
{{/if}} 
{{#if b}} 
<div class="container-fluid"> 
{{> textfield label='b option' id='transfer-city-from'}} 
{{> confirm add='b option'}} 
</div> 
{{/if}} 

И некоторые JS вот что управляет reactive variables делать все, что работу:

Template.addTour.onCreated(function() { 
this.a = new ReactiveVar(false); 
this.b = new ReactiveVar(false); 


Template.addTour.helpers({ 
a: function() { 
    return Template.instance().a.get(); 
}, 
b: function() { 
    return Template.instance().b.get(); 
} 
} 
}); 

Template.addTour.events({ 
'change select': function (event, template) { 
    if ($(event.target).val() === "a") { 
     template.a.set(true); 
    } else { 
     template.a.set(false); 
    }; 
    if ($(event.target).val() === "b") { 
     template.b.set(true); 
    } else { 
     template.b.set(false); 
    }; 
} 
}); 

Или я Шоуде лучше использовать display:block и display:none? Заранее благодарим за любые предложения.

Answer 1

Итак, мне удалось решить мою проблему с jQuery и это hide()/show() вариантов.

Вот код:

<template name="addTour"> 
<label class="control-label col-xs-4" for="tour-dropdown">Программа</label> 
<div class="dropdown col-xs-8 form-group form-horisontal"> 
    <select class="form-control" id="tour-dropdown" > 
     <option value="a">A</option> 
     <option value="b">B</option> 
    </select> 
</div> 


    <div class="container-fluid" id="a"> 
    <div class="row"> 
     <div class="col-sm-4"> 
      <form class='form-horizontal'> 
       <div class="form-group"> 
        <h1>A option</h1> 
        {{> timepicker label='время прибытия' id='transfer-time-a'}} 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 


    <div class="container-fluid" id="b"> 
    <div class="row"> 
     <div class="col-sm-4"> 
      <form class='form-horizontal'> 
       <div class="form-group"> 
        <h1>B option</h1> 
        {{> timepicker label='время прибытия' id='transfer-time-b'}} 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

И JQuery работает для меня в этой точке зрения:

Dropdown = $('#tour-dropdown'); 
$('#a').hide(); 
$('#b').hide(); 
select = this.value; 
Dropdown.change(function() { 
    if ($(this).val() === 'a') { 
     $('#a').show(); 
     console.log('A option'); 
    } else $('#a').hide(); 
    if ($(this).val() === 'b') { 
     $('#b').show(); 
     console.log('B option'); 
    } else $('#b').hide();// hide div if value is not "custom" 
}); 

Он прекрасно работает и сохранить значения внутри все скрытые входы, так что я могу представить все их один раз.