Question

我有一个表格国家和州的2个选择项目，具体取决于在国家选择的第二个选择作为其他值（状态）！

当我以空的形式进行此操作时，这是有效的。代码如下：

Template.registerPartnerStep2.events({ 'change #countryList': function (event, template) { event.preventDefault(); var x = myTrim($("#countryList").val()); var y = Countrys.findOne({country: x}); var z = y.nr; if(template.stateSub != null){ template.stateSub.stop(); } template.stateSub = Meteor.subscribe('stateList', z); }, 'change #stateList' : function(event, template) { event.preventDefault(); var x = myTrim($("#stateList").val()); if (template.citySub != null) { template.citySub.stop(); } template.citySub = Meteor.subscribe('cityList', x); },

我的模板的一部分：

{{#with addressFormData}}
        <form id="partnerAddressForm" class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-sm-2 control-label" for="textinput">{{_"Company"}}</label>
                <div class="col-sm-10">
                    <input type="text" placeholder="{{_"Company name"}}" id="company" class="form-control" value="{{partner_company}}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="textinput">{{_"VAT nr"}} </label>
                <div class="col-sm-10">
                    <input type="text" placeholder="{{_"VAT nr"}}" id="vatNr" class="form-control" value="{{partner_vat_nr}}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="textinput">{{_"Phone"}}"</label>
                <div class="col-sm-4">
                    <input type="text" placeholder="{{_"Phone"}}" id="phoneNr" class="form-control"  value="{{partner_phone_nr}}">
                </div>

                <label class="col-sm-2 control-label" for="textinput">{{_"Mobile"}}</label>
                <div class="col-sm-4">
                    <input type="text" placeholder="{{_"Mobile"}}" id="mobileNr" class="form-control"  value="{{partner_mobile_nr}}">
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-2 control-label" for="textinput">{{_"Line 1"}}</label>
                <div class="col-sm-10">
                    <input type="text" placeholder="{{_"Address Line 1"}}" id="addressLine1" class="form-control"  value="{{partner_address_line_1}}">
                </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="textinput">{{_"Line 2"}}</label>
                <div class="col-sm-10">
                    <input type="text" placeholder="{{_"Address Line 2"}}" id="addressLine2" class="form-control" value="{{partner_address_line_2}}">
                </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="textinput">{{_"Country"}}</label>
                <div class="col-sm-10">

                    <select id = "countryList"  placeholder="{{_"Country"}}" class="form-control">
                        <option disabled selected>{{_"-- select an option --"}} </option>
                        <option selected="selected">{{partner_country}}</option>
                        {{#each countrys}}
                            {{> country}}
                        {{/each}}
                    </select>

                </div>
            </div>

            <!-- Text input    STATE ZIPCODE-->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="textinput">{{_"State"}}</label>
                <div class="col-sm-4">

                    <select id = "stateList"  placeholder="{{_"State"}}" class="form-control" value="{{partner_state}}">
                        <option disabled selected>{{_"-- select an option --"}}</option>
                        <option selected="selected">{{partner_state}}</option>
                        {{#each states}}
                            {{> state}}
                        {{/each}}
                    </select>
                </div>
                <label class="col-sm-2 control-label" for="textinput">{{_"zipcode"}}</label>
                <div class="col-sm-4">
                    <input type="text" id=zipcode placeholder="{{_"zipcode"}}" class="form-control" value="{{partner_zipcode}}" readonly>
                </div>
            </div>

            <!-- Text input     CITY-->

            <div class="form-group">
                <label class="col-sm-2 control-label" for="textinput">{{_"City"}}</label>
                <div class="col-sm-10">

                    <select id = "cityList"  placeholder="City" class="form-control" value="{{partner_city}}">
                        <option disabled selected>{{_"-- select an option --"}} </option>
                        <option selected="selected">{{partner_city}}</option>
                        {{#each citys}}
                            {{> city}}
                        {{/each}}
                    </select>
                </div>
            </div>

            <!-- Button SUBMIT-->

            <div class="col-sm-12 controls">

问题一是如何修复它，让它在编辑模式下工作时，选择中已有值????

我用以下内容填写选项：

但这会产生一个问题，当我在列表中选择时，所选的值会被列出2次？

第二个问题：因为事件是更改状态列表只显示一个（所选）状态！何时添加活动请单击#statelist我必须始终在列表上单击2次才能填充该集合？

谢谢！

Answer 1

我想主要的一点是，你不应该担心填写选择。我们不再需要触摸DOM，因为如果你正确设置它，Meteor会自行做出反应。

您只需要设置要从集合中填充的选项，然后确保Meteor在选择更改时做出反应。

Meteor中有很多东西会自动反应 - 它们只是起作用。例如，如果您的模板显示记录列表，并且有人在数据库中插入新记录，Meteor将只显示新记录，因为Blaze会反复显示新插入的记录。

我尽量使用Meteor提供的自动反应对象。

然而在我们的例子中，我使用了一个Session变量（另一个反应源）来确保Meteor的反应。

每当国家/地区选择更改时，我们都会设置一个状态＆＃39;会话变量。我们在状态助手中使用相同的会话变量来从states集合中获取状态。由于我们的会话变量是被动的，因此每当它变化时，Meteor都会返回状态集合并再次获取状态。因此我们的状态选择对象由Meteor改为我们，我们不需要重新填充，因此我们不会遇到重复状态的问题。

我为你做了一个meteorpad的例子，所以你可以看到我的意思： http://meteorpad.com/pad/nccZTcPZx2k8H4XjF/select%20state%20example

要将选定的国家/地区和州列入选区，您需要以下代码：

Template.registerHelper('selected', function(key, value){
  return key == value ? {selected:'selected'}: '';
});

我从这个稍微过时的页面得到的（第二个答案） Set the selected item in a select list based on template value

您可以在每个{{selected partner.statenr nr}}中的模板中调用帮助器（请参阅<option>），如下所示：

    <select id="partnerStates">
      <option disabled selected value="">Choose a state</option>
      {{#each states partner.countrynr}}
        <option value="{{nr}}" {{selected partner.statenr nr}}>
          {{name}}
        </option>
      {{/each}}
    </select>

如果你回到meteorpad，你可以看到它在页面的下半部分工作。在启动时，我用德国和Ost-Friesland nrs填写合作伙伴记录，然后将其显示在页面下半部分的模板中。

流星选择形式问题？

1 个答案: