将输入值保存在反应变量中（Meteor）

I am using reactive vars to manage visibility of my input fields depenging on user's choice select. But when I choose one option, write anything in shown input, then go to the second option, and finally when I come back to the firs one, the input value disappears. Is there any way to keep that data untill confirm button pressing to confirm once all the fields values under all the options?

我正在使用反应变量来管理输入字段的可见性,这取决于用户的选择选择。但是当我选择一个选项时,在显示的输入中写入任何内容,然后转到第二个选项,最后当我回到第一个选项时,输入值消失。是否有任何方法可以保持数据直到确认按钮按下以确认所有选项下的所有字段值?

Here are two input groups that are displayed, when option is set:

设置选项时,显示两个输入组:

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

And some JS here that manages reactive variables to do all that job:

这里有一些JS管理反应变量来完成所有工作:

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

Or I shoud better use display:block and display:none ? Thanks in advance for any suggestions.

或者我应该更好地使用display:block和display:none?在此先感谢您的任何建议。

1 个解决方案

#1

So, I managed to resolve my problem with jQuery and it's hide() / show() options.

所以,我设法用jQuery解决了我的问题,它是hide()/ show()选项。

Here is the code:

这是代码:

<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>

And jQuery works for me in this view:

在这个视图中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"
});

It works fine and keep values inside all the hidden inputs, so I can submit all of them once.

它工作正常,并将值保存在所有隐藏的输入中,因此我可以提交所有这些输入。

#1