0

我遇到了一个我似乎无法解决的问题。我的设置在 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 属性,如果我在开发人员工具观察器中找到该对象,它实际上是填充的/非空的。

我已经把头撞在墙上一天了。以前有人经历过吗?

4

1 回答 1

1

<section>我相信问题在于您正在使用的 HTML5 元素(例如)。此处引用了该问题:https ://github.com/SteveSanderson/knockout/issues/194

要在 IE 6、7、8 上获得 HTML5 支持(并从 KO 中的此更改中受益),您需要参考以下任一:

  • innershiv.js 或者,
  • jQuery 1.7 加上modernizr.js

工作 jsfiddle(包括淘汰前的 jquery 和modernizr):http: //jsfiddle.net/antishok/MuK6E/3/

于 2013-04-06T10:54:13.710 回答