knockout.js - Knockout thinks object is null in IE8 -
i having issue can't seem find way around. setup works fine chrome, firefox, ie9 once document mode becomes ie8 knockout starts having issues, thinks observables null if use developer tool in ie8 can see it's populated.
here 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; }); } here important part of viewmodel:
function patientdetialsviewmodel() { var self = this; self.searchfields = new patientsearchmodel(); ...other properties } here single application object:
var spa = { viewmodels: { providerdetails: new providerdetailsviewmodel(), patientdetails: new patientdetialsviewmodel(), primarydiagnosisdetails: new primarydiagnosisviewmodel() } }; $(document).ready(function () { ko.applybindings(spa.viewmodels); }); here 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, @ least 1 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, @ least 1 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 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 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 number" data-val="true" data-val-range="invalid year!" data-bind="value: searchfields.year, enable: searchfields.allowsearchbynamefields" /> <em>(if used, full date must 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> there error seeing in ie8 only:
script5022: unable parse bindings. message: typeerror: 'searchfields' undefined; bindings value: value: searchfields.memberid, enable: searchfields.allowsearchbymemberidfield
i not sure how possibly because create searchfields property new , if got object in developer tool watcher it's populated/non null.
i have been banging head against wall day now. experience before?
i believe issue html5 element(s) (e.g. <section>) you're using. issue referenced here: https://github.com/stevesanderson/knockout/issues/194
to html5 support on ie 6,7,8, (and benefit change in ko) you'll need reference either:
- innershiv.js or,
- jquery 1.7 plus modernizr.js
working jsfiddle (includes jquery , modernizr before knockout): http://jsfiddle.net/antishok/muk6e/3/
Comments
Post a Comment