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

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

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

1 个答案: