可以观察到Kendo Combobox中的虚拟数据没有变化

Question

我有一些奇怪的问题。我的页面上有Kendo + Knockout。由于有很多项目，我尝试在Kendo ComboBox上设置虚拟化。但由于某种原因，组合框的第一次更改不会触发更改事件，并且观察不会发生变化。为什么呢？

如果我理解，只有值映射器的功能是提供数据集合中的项目索引。所以应该没问题。

另一个问题应该是在combobox上的autoBind属性。如果设置为false，它似乎正在工作，但初始值不在组合中绑定。怎么解决这个问题？

小提琴：http://jsfiddle.net/RaptorCZ/442h4djr/

var dataToDisplay = [
    {
        "BrokerID": 1,
        "DisplayName": "Broker ID 1"
    },
    {
        "BrokerID": 2,
        "DisplayName": "Broker ID 2"
    },
    {
        "BrokerID": 3,
        "DisplayName": "Broker ID 3"
    },
    {
        "BrokerID": 4,
        "DisplayName": "Broker ID 4"
    },
    {
        "BrokerID": 5,
        "DisplayName": "Broker ID 5"
    }
]

/** VM */
var ViewModel = function () {

    // Observable with initial value
    this.selectedID = ko.observable(2);

    /** Kendo Grid Definition */
    GetKendoComboBoxForRoleDefinition = function (context)
        {
            var self = this;
            return {
                autoBind: true,
                valuePrimitive: true,
                value: context.selectedID,
                dataTextField: 'DisplayName',
                dataValueField: 'BrokerID',
                filter: 'contains',
                virtual:
                {
                    //itemHeight: 26,
                    valueMapper: function (options)
                    {
                        var index = -1;

                        /** Find selected item in data collection */
                        var item = ko.utils.arrayFirst(dataToDisplay, function (item)
                        {
                            toastr.info(item.BrokerID + ' - ' + options.value);
                            return item.BrokerID == options.value;
                        });

                        if (item)
                        {
                            /** Get index of selected item */
                            index = ko.utils.arrayIndexOf(dataToDisplay, item);
                        }

                        toastr.info('valueMapper -> ' + options.value + ', Index: ' + index);

                        options.success([index]);
                    }
                },
                //height: 520,
                //data: undefined,
                dataSource:
                {
                    type: 'json',
                    transport:
                    {
                        read: function (options)
                        {
                            toastr.info('Transport.read()... ' + dataToDisplay.length + ' item(-s)');
                            options.success(dataToDisplay);
                        }
                    },
                    //pageSize: 80,
                    serverPaging: true,
                    serverFiltering: true
                },
                change: function (e)
                {
                    toastr.info('Combo changed to index ' + this.selectedIndex);
                }
            }
        }

};

var vm = new ViewModel();
ko.applyBindings(vm);