Warum kann ich die Optionen für diese Knockout-Grenze nicht zurücksetzen?

Question

Ich habe alles versucht, nur um den Wert eines falschen/wahren Drop-Down-Reset (es sollte standardmäßig auf false, das erste Element in das Array gebunden ist), wenn der Benutzer auf die Reset-Taste, die schließlich den gleichen Code müssen nach dem Klicken auf die Schaltfläche Hinzufügen aufgerufen werden, um alle diese Formularfelder zu löschen. Alle von ihnen sind außer dem Schiff eins.

Die Form:

<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> 

Natürlich vesselOptions ist einfach:

self.vesselOptions = ko.observableArray(); 

Im Code wird der anfängliche Aufruf dieser Funktion mir meine Optionen für IsVesselizable erfolgreich:

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

Aber meine Reset-Funktion löscht erfolgreich alles andere, einschließlich das Zurücksetzen der Kategorie dropd besitzen, indem sie tatsächlich eine API aufrufen, um das Array von Kategorien zu erhalten. Aber wenn ich das Vessel-Dropdown auf true statt auf false geändert habe, wird es nicht auf den Standardwert false zurückgesetzt, was darauf hindeutet, dass es nicht gebunden ist oder so.

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

Answer 1

Es ist wahrscheinlich, weil der Wert in newItem.IsVesselizable enthalten ist, nach wie vor auf falsch. Sie löschen den Wert in Ihrer Reset-Funktion nicht. Fügen Sie einfach:

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

Natürlich auch die optionsCaption in Verbindung Bindung mit

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

Und in Ihrem HTML verwenden Sie könnte:

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