流星：清场

Question

我正在 Meteor 上使用语义 UI。我的代码中有一些模块，例如下拉字段。一切都在获取数据，但我想清除下拉菜单，就像我可以清除文本字段一样，但它不起作用..

有人可以帮助我吗？

这是我的代码：

Meteor.subscribe('brands');

Template.deliveryForm.helpers({
    brands: function() {
       return Brands.find({}, {fields: {'brand':1}});
    }
});

Template.deliveryForm.events({
  'submit .new-delivery': function(event) {
    event.preventDefault();

    var date = event.target.date.value;
    var brand = event.target.brand.value;
    var description = event.target.description.value;

    Deliveries.insert({
        date: date,
        brand: brand,
        description: description,
        createdAt: new Date()
    });

    event.target.date.value = "";
    event.target.brand.value = "";
    event.target.description.value = "";
  }
});

Template.deliveryForm.rendered = function(){
  $('select.dropdown').dropdown({ });
}

感谢您的帮助

模板代码如下：

<template name="deliveryForm">
  <form class="ui form new-delivery">
    <div class="four inline fields">
        <div class="wide three field">
            <label>Date</label>
            <input type="date" name="date" placeholder="Date">
        </div>
        <div class="wide four field">
            <label>Marque</label>
            <select class="ui search dropdown" name="brand">
                <option value="">Selectionner Marque</option>
                {{#each brands}}
                    <option value="{{brand}}">{{brand}}</option>
                {{/each}}
                </select>
        </div>
        <div class="wide eight field">
            <label>Description</label>
            <input type="text" name="description" placeholder="Description">
        </div>
        <button class="ui button icon right labeled teal" type="submit" name="submit"><i class="right checkmark icon"></i>Valider</button>
    </div>
  </form>
</template>

Answer 1

从 Semantic UI dropdown docs 开始，您可以通过以下方式清除下拉列表：

Template.deliveryForm.rendered = function(){
  $('select.dropdown').dropdown('clear');
}

希望这有效:)

编辑

您的代码和我的示例需要包装在 Meteor.defer 中（一些参考文献 1, 2, 3），因为 DOM 在执行 [=13] 期间尚未准备好=]回调。

Template.deliveryForm.rendered = function(){
  Meteor.defer(function() {
    $('select.dropdown').dropdown('clear');
  });
}

希望这现在有效:)

Answer 2

我不确定你的功能案例是什么，但我认为在提交表单后，你只想重置下拉列表（select 你的第一个选项）。试试下面的代码：

Template.deliveryForm.events({
  'submit .new-delivery': function(event) {
    event.preventDefault();

    var date = event.target.date.value;
    var brand = event.target.brand.value;
    var description = event.target.description.value;

    Deliveries.insert({
        date: date,
        brand: brand,
        description: description,
        createdAt: new Date()
    });

    event.target.date.value = "";

    //Below code will restore defaults of your dropdown
    $('.dropdown').dropdown('restore defaults');

    event.target.description.value = "";
  }
});

Answer 3

好的，伙计们，这似乎可行，但是你的两个答案......这是代码，但无法解释为什么......

Meteor.subscribe('brands');

Template.deliveryForm.helpers({
  brands: function() {
    return Brands.find({}, {fields: {'brand':1}});
  }
});

Template.deliveryForm.events({
 'submit .new-delivery': function(event) {
    event.preventDefault();

    var date = event.target.date.value;
    var brand = event.target.brand.value;
    var description = event.target.description.value;

    Deliveries.insert({
        date: date,
        brand: brand,
        description: description,
        createdAt: new Date()
    });

    event.target.date.value = "";
    $('.dropdown').dropdown('restore defaults');
    event.target.description.value = "";
 }
});

Template.deliveryForm.rendered = function(){
  Meteor.defer(function() {
    $('.dropdown').dropdown('restore defaults');
  });
}

再次感谢:)

流星：清场

Meteor : Clear a field

javascript

meteor

meteor-blaze

semantic-ui

meteor-helper