我最近在我的代码中遇到了竞争条件的小问题。我正在使用 Knockout.Js 收集一些要显示给用户的信息。
当需要在选择值之前生成下拉列表时,就会出现问题。 通常下拉列表比其他请求小并且会赢得比赛,因此不会造成问题。然而,我在我的应用程序中看到了一些情况,在较慢的互联网连接上,列表会在其次加载。下面是一个例子。如果列表中没有该值的选项,则无法选择它,并且对用户来说就好像没有被选中一样。
使用 setTimeout
我模拟了这种体验。您可以交换这两个值以查看“成功”场景。
function ViewModel() {
var self = this;
self.UserName = ko.observable();
self.UserGroup = ko.observable();
self.GroupList = ko.observableArray();
self.LoadUserGroups = function() {
//Ajax call to populate user groups
setTimeout(function() {
response = "Red Team,Blue Team,Green Team".split(",");
self.GroupList(response)
}, 2000) /// SWAP ME
}
self.LoadUserInformation = function() {
setTimeout(function() {
response = {
UserName: "John Pavek",
UserGroup: "Blue Team"
};
self.UserName(response.UserName);
self.UserGroup(response.UserGroup);
}, 1000) // SWAP ME
}
self.Load = function() {
self.LoadUserGroups();
self.LoadUserInformation();
}
self.Load();
}
ko.applyBindings(new ViewModel())
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
User Name:
<input data-bind="value: UserName" /> User Group:
<select data-bind="options: GroupList, optionsCaption: '--Pick a Team--', value: UserGroup"></select>
我可以在我的代码中添加什么,Vanilla 或 knockout 来防止这个问题的发生而不减慢整个体验?
最佳答案
发生的事情是,当 LoadUserInformation
尝试设置的值不在选项列表中时,选择将覆盖 UserGroup
。但是你可以使用 valueAllowUnset
告诉它不要担心未知的值。然后它不会覆盖。
function ViewModel() {
var self = this;
self.UserName = ko.observable();
self.UserGroup = ko.observable();
self.GroupList = ko.observableArray();
self.LoadUserGroups = function() {
//Ajax call to populate user groups
setTimeout(function() {
response = "Red Team,Blue Team,Green Team".split(",");
self.GroupList(response)
}, 2000) /// SWAP ME
}
self.LoadUserInformation = function() {
setTimeout(function() {
response = {
UserName: "John Pavek",
UserGroup: "Blue Team"
};
self.UserName(response.UserName);
self.UserGroup(response.UserGroup);
}, 1000) // SWAP ME
}
self.Load = function() {
self.LoadUserGroups();
self.LoadUserInformation();
}
self.Load();
}
ko.applyBindings(new ViewModel())
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
User Name:
<input data-bind="value: UserName" /> User Group:
<select data-bind="options: GroupList, optionsCaption: '--Pick a Team--', value: UserGroup, valueAllowUnset: true"></select>
关于javascript - knockout 中的比赛条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48712576/