KnockoutJS `with` binding and IE8

Question

For some reason my code is generating the error below in IE8, but not in any of the normal browsers.

SCRIPT5022: Unable to parse bindings.
Message: TypeError: 'logoSrc' is undefined;
Bindings value: 'attr': { 'src': logoSrc } 

I confirmed that the logoSrc property is indeed defined, even in IE8, right before binding, but still it fails. And disabling the binding to logoSrc just causes the next binding in line to fail.

The html is below. I know I've used a with binding before, so I'm pretty sure that's not the problem, and the html seems to be properly closed.

<div data-bind="visible: mode() === 'print'" class="container-fluid">
    <!-- ko with: printVm -->
    <div class="row-fluid">
        <div class="span12">
            <div class="page-header">
                <div class="pull-right" style="width:140px;height:60px;overflow:hidden;">
                    <img data-bind="'attr': { 'src': logoSrc }" src="" />
                </div>
                <h2>Invoice Statement - <span data-bind="text: itemZeroClientName"></span></h2>
            </div>
            <strong>Invoice number:</strong> <span data-bind="text: invoiceId"></span>
            <strong>Invoice date:</strong> <span data-bind="text: userInfo().invoiceDateDisplay"></span>
            <strong>Client number:</strong> <span data-bind="text: itemZeroClientId">22365</span>
            <hr />
        </div>
    </div>
    <div class="row-fluid">
        <div class="span6 cr-tablet6 cr-phone6">
            <h4>Billed by <span data-bind="text: companyNameDisplay"></span></h4>
            <span data-bind="html: companyInfo"></span>
        </div>
        <div class="span6 cr-tablet6 cr-phone6">
            <h4>Billed to</h4>
            <span data-bind="html: clientInfoDisplay"></span>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <hr />
            <table id="printInvoiceTable" class="table">
                <thead>
                <tr>
                    <th class="date">Date</th>
                    <th class="name">Provider</th>
                    <th class="code">Proc Code</th>
                    <th class="location">Location</th>
                    <th class="time">Hours</th>
                    <th class="units">Units</th>
                    <th class="charge">Charges</th>
                </tr>
                </thead>
                <tbody data-bind="foreach: items">
                    <tr>
                        <td data-bind="text: dateDisplay"></td>
                        <td data-bind="text: orgName"></td>
                        <td data-bind="text: procedureCodeString"></td>
                        <td data-bind="text: location"></td>
                        <td class="formatted-number" data-bind="text: timeWorkedHrs"></td>
                        <td class="formatted-number" data-bind="text: (unitsOfService() || 0).toFixed(2)"></td>
                        <td class="formatted-currency" data-bind="text: (clientCharges() || 0).toFixed(2)"></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="formatted-number" data-bind="text: totalWorkedHours"></td>
                        <td class="formatted-number" data-bind="text: totalUnitsOfService"></td>
                        <td class="formatted-currency" data-bind="text: totalClientRate"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <!-- /ko -->
</div>

Answer 1

As suggested above, it seems the issue is with IE8 removing comments (and thus virtual bindings in some conditions) and has been reported on the knockout forums