我遇到了一个我似乎无法解决的问题。我的设置在 chrome、firefox、IE9 上运行良好,但是一旦文档模式变为 IE8 淘汰赛开始出现问题,它认为 observables 为空,但如果我在 IE8 中使用开发人员工具,我可以看到它已被填充。
这是我的数据模型:
function PatientSearchModel(data) {
var self = this;
var defaultValue = '';
var memberId = defaultValue;
var firstName = defaultValue;
var lastName = defaultValue;
var day = defaultValue;
var month = defaultValue;
var year = defaultValue;
if (data != undefined) {
memberId = data.MemberId;
firstName = data.FirstName;
lastName = data.LastName;
day = data.Day;
month = data.Month;
year = data.Year;
}
self.MemberId = ko.observable(memberId);
self.FirstName = ko.observable(firstName);
self.LastName = ko.observable(lastName);
//date validation
var monthValidation = {
min: 01,
max: 12
};
var dayValidation = {
min: 01,
max: 31
};
var yearValidation = {
minLength: 4
};
self.Month = ko.observable(month).extend(monthValidation);
self.Day = ko.observable(day).extend(dayValidation);
self.Year = ko.observable(year).extend(yearValidation);
self.AllowSearchByNameFields = ko.computed(function () {
if (self.MemberId() == "") {
return true;
}
var empty = '';
self.FirstName(empty);
self.LastName(empty);
self.Day(empty);
self.Month(empty);
self.Year(empty);
return false;
});
self.AllowSearchByMemberIdField = ko.computed(function () {
var empty = "";
if (self.FirstName() != empty || self.LastName() != empty ||
self.Day() != empty || self.Month() != empty || self.Year() != empty) {
self.MemberId('');
return false;
}
return true;
});
self.SearchById = ko.computed(function () {
return self.MemberId() != "";
});
self.ValidPatientNameSearchCriteria = ko.computed(function () {
var empty = '';
if (self.FirstName().length > 0 && self.LastName().length > 0) {
if (self.Day() == empty && self.Month() == empty && self.Year() == empty) {
return true;
}
if (self.Day().length > 1 && self.Month().length > 1 && self.Year().length > 3) {
return true;
}
}
return false;
});
}
这是我的 ViewModel 的重要部分:
function PatientDetialsViewModel() {
var self = this;
self.SearchFields = new PatientSearchModel();
...other properties
}
这是我的单个应用程序对象:
var spa = {
viewModels: {
providerDetails: new ProviderDetailsViewModel(),
patientDetails: new PatientDetialsViewModel(),
primaryDiagnosisDetails: new PrimaryDiagnosisViewModel()
}
};
$(document).ready(function () {
ko.applyBindings(spa.viewModels);
});
这是HTML:
<section id="PatientSearch" data-bind="with: spa.viewModels.patientDetails">
<table width="100%" class="nchPortalInnerTable1" cellpadding="5">
<tr class="searchSelectHeader" colspan="2">
<td colspan="2">Patient Search</td>
</tr>
<tr>
<td align="center" colspan="2">
<span style="font-weight: bold">- Enter Either -</span>
</td>
</tr>
<tr>
<td width="100">Member ID: </td>
<td>
<input type="text" id="patientMemberId" data-bind="value: SearchFields.MemberId, enable: SearchFields.AllowSearchByMemberIdField"/>
<em>(Complete ID number required.)</em>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<span style="font-weight: bold">- OR -</span>
</td>
</tr>
<tr>
<td width="100">First Name: </td>
<td>
<input type="text" id="patientFirstName" name="patientLastName" data-bind="value: SearchFields.FirstName, enable: SearchFields.AllowSearchByNameFields" /> <em>(Partial ok, at least one character required.)</em>
</td>
</tr>
<tr>
<td width="100">Last Name: </td>
<td>
<input type="text" id="patientLastName" name="patientLastName" data-bind="value: SearchFields.LastName, enable: SearchFields.AllowSearchByNameFields"/> <em>(Partial ok, at least one character required.)</em>
</td>
</tr>
<tr>
<td width="100">Date of birth: </td>
<td>
mm <input type="text" id="patientDOBmm" name="patientDOBmm" maxlength=2 style="width:15px;" onkeyup="tabToNextField(this,'patientDOBdd')" data-val-number="Month must be a number" data-val-range-min="1" data-val-range-max="12" data-val="true" data-val-range="Invalid month!" data-bind="value: SearchFields.Day, enable: SearchFields.AllowSearchByNameFields" /> /
dd <input type="text" id="patientDOBdd" name="patientDOBdd" maxlength=2 style="width:15px;" onkeyup="tabToNextField(this,'patientDOByyyy')" data-val-number="Day must be a number" data-val-range-min="1" data-val-range-max="31" data-val="true" data-val-range="Invalid day!" data-bind="value: SearchFields.Month, enable: SearchFields.AllowSearchByNameFields" /> /
yyyy <input type="text" id="patientDOByyyy" name="patientDOByyyy" maxlength=4 style="width:50px;" data-val-range-min="1800" data-val-number="Year must be a number" data-val="true" data-val-range="Invalid year!" data-bind="value: SearchFields.Year, enable: SearchFields.AllowSearchByNameFields" />
<em>(If used, full date must be entered)</em>
</td>
</tr>
<tr style="background-color: #ddd">
<td align="center" colspan=2>
<input id="searchPatient_button" type="button" value="Search" data-bind="click: search" />
<input id="searchPatient_cancel" type="button" value="Cancel" data-bind="click: clear"/>
<span data-bind="visible: DisplaySearchSpinner">
<img src="@Url.Content(spinnerSmallGif)" alt="Spinner"/>
</span>
</td>
</tr>
</table>
</section>
我只在 IE8 中看到错误:
SCRIPT5022:无法解析绑定。消息:TypeError:'SearchFields' 未定义;绑定值:值:SearchFields.MemberId,启用:SearchFields.AllowSearchByMemberIdField
我不确定这怎么可能,因为我用一个新的创建 SearchFields 属性,如果我在开发人员工具观察器中找到该对象,它实际上是填充的/非空的。
我已经把头撞在墙上一天了。以前有人经历过吗?