Question

当用户点击重置按钮时，我尝试了所有内容，只是为了获取false / true下拉列表的值（它应该默认为false，它所绑定的数组中的第一项），在点击Add按钮清除所有这些表单字段后，最终需要调用相同的代码。除了船只之外，所有这些都在清理。

表格：

<form data-bind="submit: addItem">

                <label>Category</label><br/>
                <div>
                    <select data-bind="options: categories, optionsText: 'Name', value: newItem.Category"></select>
                </div><br/>


                <div class="form-group">
                    <label>Name</label><br/>
                    <div>
                        <input type="text" class="form-control" id="inputName" data-bind="value: newItem.Name"/>
                    </div>

                    <label>Description</label><br/>
                    <div>
                        <textarea rows="3" class="form-control" id="inputDescription" data-bind="value: newItem.Description"></textarea>
                    </div>

                    <label>Price</label>
                    <div>
                        <input type="number" step="any" class="form-control" id="inputPrice" data-bind="value: newItem.Price"/>
                    </div>

                    <label>Vesselizable?</label>
                    <div>
                        <select data-bind="options: vesselOptions, value: newItem.IsVesselizable"></select>
                    </div>

                </div>
                <button type="submit" class="btn btn-default">Add</button>
                <button data-bind="click: hideAddPanel" class="btn btn-default">Cancel</button>
                <button data-bind="click: resetAddPanel" class="btn btn-default">Reset</button>
            </form>

当然，vesselOptions只是：

self.vesselOptions = ko.observableArray();

在代码中，对此函数的初始调用为我提供了成功的IsVesselizable选项：

    function getVesselizability() {
    var data = ['false', 'true'];
    self.vesselOptions(data);
}

但是我的重置功能成功地清除了其他所有内容，包括通过实际调用API来获取类别数组来重置类别下拉列表。但是，如果我将Vessel下拉列表更改为true而不是false，则不会将其重置为＆＃39;默认值为false，表明它没有约束或什么。

    self.resetAddPanel = function () {
    getCategories();
    getVesselizability();
    self.newItem.Name('');
    self.newItem.Description('');
    self.newItem.Price('');
}

Answer 1

可能是因为newItem.IsVesselizable中包含的值仍设置为 false 。您没有清除重置功能中的值。只需添加：

self.resetAddPanel = function () {
  /*Same as before*/
  self.newItem.IsVesselizable(true);
}

当然，您也可以将optionsCaption绑定与

结合使用

self.resetAddPanel = function () {
  /*Same as before*/
  self.newItem.IsVesselizable('');
}

在你的HTML中：

<select data-bind="options: vesselOptions, value: newItem.IsVesselizable, optionsCaption: 'Please Choose...'">
</select>

为什么我无法重置此淘汰赛选区上的选项？

1 个答案: