私は回避策を見つけることができないという問題を抱えています。私のセットアップはクロム、Firefox、IE9 で正常に動作しますが、ドキュメント モードが IE8 ノックアウトになると、オブザーバブルが null であると見なされる問題が発生し始めますが、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 プロパティを new で作成し、開発者ツール ウォッチャーでそのオブジェクトに到達した場合、実際にはデータが入力されているか、null でないため、これがどのように行われるかはわかりません。
ここ1日、頭を壁にぶつけています。誰もこれを前に経験していますか？