https://stackoverflow.com/questions/44440227/infinite-loop-for-tag-it-wrapped-into-a-knockout-component
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<select data-bind="options: sellers, optionsValue: 'Value', optionsText: 'Text'"></select>
<br/> <br/>
<span>seller id: </span><input type="text" id="newID" style="width: 30px;">
<input type="button" id="nextForm" value="Add" />
JavaScript
var SellerOptionModel = function() {
var self = this;
self.sellers = ko.observableArray([
{ Text: 'seller 1', Value: 1 },
{ Text: 'seller 2', Value: 2 },
{ Text: 'seller 3', Value: 3 }
]);
self.sellerID = ko.observable();
}
var sellerOptionModel = new SellerOptionModel();
ko.applyBindings(sellerOptionModel);
$("#nextForm").on('click', function(e) {
//...code removed
//debugging values};
var newId = $("#newID").val();
var result = { success: true, sellerID: newId };
var studentName = 'seller ' + result.sellerID;
if(result.success == true) {
// add seller to dropdown list
//console.log("opts: " + JSON.stringify(sellerOptionModel.sellers()));
var match = false;
for (var i = 0; i < sellerOptionModel.sellers().length; i++) {
if(sellerOptionModel.sellers()[i].Value == result.sellerID){
match = true;
break;
}
}
if (!match) {
console.log("new id added");
sellerOptionModel.sellers.push({Text: studentName, Value: result.sellerID});
//sellerOptionModel.sellers.sort();
}else{
console.log("id already exists")
}
console.log("opts: " + JSON.stringify(sellerOptionModel.sellers()));
} else {
//slideDownMsg("Failed saving tally entry for " + firstName + " " + lastName + ".");
//slideUpMsg(4000);
}
});