Marionette Sorted CompositeView List

Collection of users has a comparator on name. When you add users to the collection the CompositeView renders an extra model - the latest addition. Bug?

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<div>Enter user name and hit add user to build your list</div>
<div id="divadduser">
    <input id="inputusername"/>
    <input id="buttonadduser" type="button" value="add user"/>
</div>

<div id="divusers"></div>

JavaScript

var nextAvailableUserId = 0;

//Define a region to show a list of users 
var userListRegion = new Backbone.Marionette.Region({ el: '#divusers'});

var ConnectedUserModel = Backbone.Model.extend();

//Make a user item view
var UserView = Backbone.Marionette.ItemView.extend({
    template: Handlebars.compile(
        '<a id="{{id}}">{{name}}</a>'        
    ),
    tagName: "li",   
});

//Define a user collection
var UserCollection = Backbone.Collection.extend({
    model: ConnectedUserModel,
    comparator: function(model) {return model.get('name').toLowerCase();}
});

//Make a user collection instance
var collConUsers = new UserCollection();                   

//Define a composite user list view 
var UserListView = Backbone.Marionette.CompositeView.extend({
    template: Handlebars.compile(
       '<ul id="ulusers"></ul>'
    ),

    itemView: UserView,
    //itemViewContainer: 'ul',
    
    appendHtml: function(compositeView, itemView, index){
        var childrenContainer = $(compositeView.$("#ulusers") || compositeView.el);
        var children = childrenContainer.children();
        if (children.size() === index) {
          childrenContainer.append(itemView.el);
        } 
        else {
          childrenContainer.children().eq(index).before(itemView.el);
        }
    }
});

//Make a composite user list view instance
var view = new UserListView({
    collection: collConUsers                        
});

//Show the view
userListRegion.show(view);

//Handle add user button click
$('#buttonadduser').click(function () {    
    var uName = $("#inputusername").val();
    if (uName.length > 0) {
        nextAvailableUserId += 1;
        collConUsers.add([{ id: nextAvailableUserId, name: uName }]);        
        $("#inputusername").val('');
    }
});