Knockout - native template foreach bug?

by johnpapa

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<html>
<head>
    <title>Knockout - Native KO Templates</title>
<body>
    <div class="page">
        <h2>Knockout - Native KO Templates</h2>
        <ul><li>Using Native KO Templates</li></ul>
        <div id="main">
            <p>
                Person's Name:
                <!-- ko if: model -->
                <span data-bind="text: fullName"></span>
                <!-- /ko -->
            </p>
            <p>
                First Name:
                <!-- ko if: model -->
                <input data-bind="value: model().FirstName" />
                <!-- /ko -->
            </p>
            <p>
                Last Name:
                <!-- ko if: model -->
                <input data-bind="value: model().LastName" />
                <!-- /ko -->
            </p>
            <div data-bind="if: model">
                <h3>
                    Friends (<span data-bind="text: model().Friends().length"></span>)
                    <button data-bind="click: addFriend">Add Friend</button>
                </h3>
                <div style="height: 100px; border: thin solid #C0C0C0; overflow: auto" >
                    <ul data-bind="foreach: model().Friends">
                        <li>
                            <span data-bind="text:Name"></span>
                            <input data-bind="value:Name"/>
                            <button class="remove-item">Remove</button>
                            <input type="checkbox" data-bind="checked: IsOnTwitter"/>
                            <span>is on twitter</span>
                            <input data-bind="value: TwitterName"/>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

JavaScript

var my = my || {};

my.personModel = {
    FirstName: ko.observable(),
    LastName: ko.observable(),
    Friends: ko.observableArray()
};

my.personVm = (function(my, global) {
    "use strict";
    var ko = global.ko,
        model = ko.observable(my.personModel),
        fullName = ko.dependentObservable(function() {
            if (!model()) {
                return null;
            }
            return model().FirstName() + " " + model().LastName();
        }, this),
        addFriend = function() {
            model().Friends.push(
            my.ModelFactory.createFriend("max mustermann"));
        },
        remove = function(myfriend) {
            ko.utils.arrayRemoveItem(model().Friends(), myfriend);
            //alert(model().Friends().length);
        },
        load = function() {
            var result = {
                "FirstName": "John",
                "LastName": "Papa",
                "Friends": [{
                    "IsOnTwitter": true,
                    "Name": "Dan",
                    "TwitterName": "@danwahlin"},
                {
                    "IsOnTwitter": false,
                    "Name": "Landon",
                    "TwitterName": null}]
            };
            //                    my.PersonDataService.getPersons(
            //                        function (result) {
            model().FirstName(result.FirstName);
            model().LastName(result.LastName);
            model().Friends(result.Friends);
            //                        }
            //                    );
        };

    // public API
    return {
        model: model,
        fullName: fullName,
        load: load,
        remove: remove,
        addFriend: addFriend
    };
}(my, this));

(function(my, global) {
    "use strict";
    var ko = global.ko;
    my.ModelFactory = {
        createFriend: function(name) {
            return {
                Name: ko.observable(name),
                IsOnTwitter: ko.observable(false),
   ...