KnockoutJS数据绑定从IE7和IE8删除元素

Question

I am attempting to bind four properties to a fairly straight-forward HTML structure. Everything is peaches in FF11, Chrome18 and IE9 until I load the page in IE7/IE8 (by changing the Browser and Coument Modes in IE9's version of developer tools).

Simple HTML structure - just outputs four rows of bound data. A label and the bound data.

<div id="loyaltyProgramSummary" class="content-block clearfix" data-bind="with: CustomerPoints">
    <div class="form-row">
        <div>PricingGroup:</div>
        <div><span data-bind="text:PricingGroupName"></div>
    </div>
    <div class="form-row">
        <div>LifetimePointsToDate:</div>
        <div><span data-bind="text:LifetimePoints"></div>
    </div>
    <div class="form-row">
        <div>PointsUsed:</div>
        <div><span data-bind="text:RedeemedPoints"></div>
    </div>
    <div class="form-row">
        <div>AvailablePoints:</div>
        <div><span data-bind="text:AvailablePoints"></div>
    </div>
</div>

The first row, "PricingGroupName" is a ko.computed field and is the one that ends up getting dropped. When I look at the rendered HTML in the IE9 dev tools it has been omitted completely.

   <div id="loyaltyProgramSummary" class="content-block clearfix" data-bind="with:CustomerPoints" __ko__1335910690335="ko3">            
       <div class="form-row" __ko__1335910690335="ko4">
            <div>LifetimePointsToDate:</div>
            <div><span data-bind="text:LifetimePoints" __ko__1335910690335="ko5">1000</div>
        </div>
        <div class="form-row" __ko__1335910690335="ko8">
            <div>PointsUsed:</div>
            <div><span data-bind="text:RedeemedPoints" __ko__1335910690335="ko6">1550</div>
        </div>
        <div class="form-row" __ko__1335910690335="ko9">
            <div>AvailablePoints:</div>
            <div><span data-bind="text:AvailablePoints" __ko__1335910690335="ko7">8450</div>
        </div>
    </div>

I thought it might have had something to do with the computed column but the "Available Points" is also a computed field and it functions perfectly.

I have created a "fiddle" illustrating the issuewhich can be found here ...

Any help would be GREATLY appreciated!

Thank You, Gary

Answer 1

Don't use empty self-closing tags, change to . http://jsfiddle.net/UXA4Q/13/