javascript - 在淘汰赛js中首次加载页面后,下拉/复选框选项在第一次点击时没有绑定
问题描述
我正在调查 ASP.net + knockout-3.1.0 应用程序中的错误。
错误:我有一个带有几个下拉菜单和复选框的弹出窗口。有时,在第一次单击打开弹出窗口时加载第一页后,它会显示为空的下拉列表/复选框。它很少发生,只有弹出问题。
代码:
ASPX
<div id="campaignSettings" runat="server">
<div class="action modal-popup">
<a data-bind="click: settings.Show">Settings </a>
</div>
<div id="popupContainer">
<div id="dialog" class="window dialog-settings">
<div class="dialog-container">
<controls:Settings id="settings" runat="server"></controls:Settings>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function loadKo() {
self.settings = new SettingsViewModel(self);
ko.applyBindings(self);
ko.applyBindings(self.settings, document.getElementById('koSettings'));
}
Sys.Application.add_init(loadKo);
</script>
设置.ascx
<div id="koSettings">
<select data-bind="options: messageDropdown.Items, optionsText: 'Value', optionsValue: 'ID', value: messageDropdown.SelectedValue" ></select>
</div>
设置.js
function SettingsViewModel(parent) {
var self = this;
self.isVisible = ko.observable(false);
self.isLoaded = false;
self.SearchType = ko.observable(false);
self.ShowDefault = ko.observable();
self.messageDropdown = {
Items: ko.observableArray(),
SelectedValue: ko.observable()
};
self.preferences = ko.observableArray();
self.showDuration = ko.observable(false);
self.getPreference = function (list, id) {
var arr = ko.utils.arrayFilter(list, function (item) {
return item.PreferenceID() == id.PreferenceID;
});
return arr[0];
}
self.messageDropdown.SelectedValue.subscribe(function (data) {
if (data == 22) {
self.showDuration(false);
self.durationDropdown.SelectedValue(0);
}
else {
self.showDuration(true);
}
});
self.Show = function () {
if (self.isLoaded !== true) {
self.Load();
}
if (self.isVisible() !== true) {
self.LoadPreferences();
}
self.isVisible(true);
}
self.Cancel = function () {
self.isVisible(false);
}
self.Load = function () {
$.ajax({
type: "GET",
contentType: "application/json",
url: "rest/preference/load",
async: false,
context: document.body
}).done(function (data) {
ko.mapping.fromJS(data.Data, {}, self);
self.isLoaded = true;
self.SearchType(data.Data.SearchType);
});
}
self.LoadPreferences = function () {
$.ajax({
type: "GET",
contentType: "application/json",
url: "rest/preference/get",
async: false,
context: document.body
}).done(function (data) {
self.preferences.removeAll();
self.messageDropdown.SelectedValue(data.Data.SelectedMessage);
});
}
}
$(document).ready(function () {
$('.modal-popup').click(function (e) {
var att = $('.modal-popup').attr('disabled');
var isLinkDisabled = false;
e.preventDefault();
if (!$.browser.msie) {
if (att != 'disabled') {
isLinkDisabled = false;
}
else {
isLinkDisabled = true;
}
}
else {
if (att != true) {
isLinkDisabled = false;
}
else {
isLinkDisabled = true;
}
}
if (!isLinkDisabled) {
var id = $('#dialog');
setPopupPosition(id, e);
$(id).show('fast');
}
});
});
我注意到有时当弹出窗口显示为空时不会触发 self.Show 功能。任何人可能有的见解将不胜感激。
解决方案
在settings.js中添加此代码解决了我的问题:
$(document).ready(function () {
$('.modal-popup').click(function (e) {
var elementToBind = document.getElementById('koSettings');
var existingContext = ko.contextFor(elementToBind);
if (existingContext && existingContext.$data.isLoaded) {
// do nothing
}
else {
existingContext.$rawData.Load();
existingContext.$rawData.LoadPreferences();
}
// other lines
});
});
推荐阅读
- erlang - Elixir/Erlang :gen_udp 伪标头
- ruby-on-rails - Rails:我想嵌套一个具有 nn 关系的路由来获取两个参数
- python - 如何在具有线性模型的 IV2SLS 中按实体和年份进行聚类?
- python - Anaconda Navigator 无法在 Windows 10 上打开
- python-3.x - POST 请求后的 POST 请求并使用第一个 POST FLASK 重定向回来
- api - 第三方服务不断发送API并多次触发该功能
- metadata - 在 android Java 2021 上的 TextView 中显示所选图像的 Exif 数据
- google-apps-script - Google 幻灯片日志输出中的 GAS getPageElementType 太大。截断输出
- json - JSON中的if语句
- javascript - 如何在反应应用程序中从一页过渡到另一页