Unexpected call to method or property access. Only in IE8
knockout-2.0, knockout.js
Solution
In my specific case the issue was "simple"...after debugging with IE9 running as IE8 for 6+ hours I added `domNode` to the watch list, and saw that it was failing to `appendChild`...I looked at the dom element and it was a:
<td data-bind="text: viewModel.functionName(property)"></td>
All I did was change this binding to the following:
<td>
<span data-bind="text: viewModel.functionName(property)"></span>
</td>
Apparently IE8 has issues with binding a `function` `text` element inside a double nested `foreach` loop. I'm not sure if this will ever help anyone else, but the important part is to debug to the issue using IE9 in IE8 mode. This allows you to use the `Add to watch` which allows you to see the properties on your objects...then look for the node it is failing on, and guess and pray.
God Speed...
Problem
The following error occurs only in `IE8`...Works in `Chrome` and `Firefox` can't test IE9 as I have recently downgraded for testing purposes. Unexpected call to method or property access. Call Stack Relevant Code marked with \\Call occurs here Debug values from IE Debugger...: _frames = object/function callback = object/function callbackTarget = object/function callbackArg = undefined ``` ko.dependencyDetection = (function () { var _frames = []; return { begin: function (callback) { _frames.push({ callback: callback, distinctDependencies:[] }); }, end: function () { _frames.pop(); }, registerDependency: function (subscribable) { if (!ko.isSubscribable(subscribable)) throw new Error("Only subscribable things can act as dependencies"); if (_frames.length > 0) { var topFrame = _frames[_frames.length - 1]; if (!topFrame || ko.utils.arrayIndexOf(topFrame.distinctDependencies, subscribable) >= 0) return; topFrame.distinctDependencies.push(subscribable); topFrame.callback(subscribable); } }, ignore: function(callback, callbackTarget, callbackArgs) { try { _frames.push(null); return callback.apply(callbackTarget, callbackArgs || []); } //Call occurs here //Error occurs here since there isn't a catch and the try is failing. finally { _frames.pop(); } } }; })(); ``` Called From: ``` "notifySubscribers": function (valueToNotify, event) { event = event || defaultEvent; if (this._subscriptions[event]) { //Call occurs here ko.dependencyDetection.ignore(function() { ko.utils.arrayForEach(this._subscriptions[event].slice(0), function (subscription) { // In case a subscription was disposed during the arrayForEach cycle, check // for isDisposed on each subscription before invoking its callback if (subscription && (subscription.isDisposed !== true)) subscription.callback(valueToNotify); }); }, this); } }, ``` Called From: ``` ko.observable = function (initialValue) { var _latestValue = initialValue; function observable() { if (arguments.length > 0) { // Write // Ignore writes if the value hasn't changed if ((!observable['equalityComparer']) || !observable['equalityComparer'](_latestValue, arguments[0])) { observable.valueWillMutate(); _latestValue = arguments[0]; if (DEBUG) observable._latestValue = _latestValue; observable.valueHasMutated(); } return this; // Permits chained assignments } else { // Read ko.dependencyDetection.registerDependency(observable); // The caller only needs to be notified of changes if they did a "read" operation return _latestValue; } } if (DEBUG) observable._latestValue = _latestValue; ko.subscribable.call(observable); observable.peek = function() { return _latestValue }; //call occurs here observable.valueHasMutated = function () { observable["notifySubscribers"](_latestValue); } observable.valueWillMutate = function () { observable["notifySubscribers"](_latestValue, "beforeChange"); } ko.utils.extend(observable, ko.observable['fn']); ko.exportProperty(observable, 'peek', observable.peek); ko.exportProperty(observable, "valueHasMutated", observable.valueHasMutated); ko.exportProperty(observable, "valueWillMutate", observable.valueWillMutate); return observable; } ``` Called From: ``` ko.observable = function (initialValue) { var _latestValue = initialValue; function observable() { if (arguments.length > 0) { // Write // Ignore writes if the value hasn't changed if ((!observable['equalityComparer']) || !observable['equalityComparer'](_latestValue, arguments[0])) { observable.valueWillMutate(); _latestValue = arguments[0]; if (DEBUG) observable._latestValue = _latestValue; //Call occurs here observable.valueHasMutated(); } return this; // Permits chained assignments } else { // Read ko.dependencyDetection.registerDependency(observable); // The caller only needs to be notified of changes if they did a "read" operation return _latestValue; } } if (DEBUG) observable._latestValue = _latestValue; ko.subscribable.call(observable); observable.peek = function() { return _latestValue }; observable.valueHasMutated = function () { observable["notifySubscribers"](_latestValue); } observable.valueWillMutate = function () { observable["notifySubscribers"](_latestValue, "beforeChange"); } ko.utils.extend(observable, ko.observable['fn']); ko.exportProperty(observable, 'peek', observable.peek); ko.exportProperty(observable, "valueHasMutated", observable.valueHasMutated); ko.exportProperty(observable, "valueWillMutate", observable.valueWillMutate); return observable; } ``` Called From: ``` self.fraudQueue(msg.d); ``` ViewModel ``` function FraudQueueViewModel(runDate, analyst, fraudOid, runNumber, processed, parameter) { var self = this; self.fraudQueue = ko.observableArray(); \\... ``` msg.d Can't share true `msg.d` but is validated as valid `JSON` and `JS object`, and is an `array`. UPDATE 1 Error appears to be on an internal array of `msg.d`...`msg.d` contains 18 internal `arrays` of `objects`, some of which contain another internal `array`. I created this jsFiddle to demonstrate the issue but can't even get IE8 to open jsFiddle.