Question

我遇到的问题似乎无法找到方法。我的设置工作正常chrome，firefox，IE9，但一旦文档模式成为IE8淘汰开始有问题，它认为observables为null但如果我在IE8中使用开发人员工具，我可以看到它已填充。

这是我的DataModel：

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：＆＃39; SearchFields＆＃39;未定义;绑定值：值： SearchFields.MemberId，启用：SearchFields.AllowSearchByMemberIdField

我不确定这是怎么回事，因为我使用new创建了SearchFields属性，如果我在开发人员工具观察器中找到了该对象，它实际上是填充/非null。

我一直在靠墙撞墙一天。有人以前经历过这个吗？

Answer 1

我认为问题是您正在使用的HTML5元素（例如<section>）。此处引用了此问题：https://github.com/SteveSanderson/knockout/issues/194

在IE 6,7,8上获得HTML5支持，（并从中获益   KO）你需要参考：


innershiv.js或，

jQuery 1.7 plus modernizr.js

工作jsfiddle（在淘汰赛之前包括jquery和modernizr）：http://jsfiddle.net/antishok/MuK6E/3/

Knockout认为IE8中的对象为空

1 个答案: