流星：清除字段

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），因为在执行 rendered 回调期间 DOM 尚未准备好。

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

希望现在可以使用 :)

Answer 2

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

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

再次感谢:)