Knockout.js requirejs w/knockoutjs w/select2无法在第一次加载时更新observable

我们第一次加载requirejs模块时，我的视图模型中的观察值似乎没有被更新。但是当你评论

$（“#ddl”）。选择2（）一切正常

requirejs.config({
    'paths': {
        'jquery': '//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min',
            'ko': '//ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0',
            'select2': '//ivaynberg.github.io/select2/select2-3.4.5/select2',
            'domReady': 
                '//cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady'
    },
        'shim': {
        'select2': {
            deps: ['jquery'],
            exports: '$.select2'
        }
    }
});

define('simpleKo', ['jquery', 'ko', 'domReady', 'select2'],

function ($, ko, domReady) {
    var simpleViewModel = function () {
        var self = this;
        self.name = ko.observable();
        self.names = ko.observableArray(['John', 'Tim', 'Mike', 'Jay']);
    };

    domReady(function () {
        ko.applyBindings(new simpleViewModel());
        $("#ddl").select2({
            width: 'resolve'
        });
    });
});

requirejs(['simpleKo']);

上有一个实例，当您第一次在没有缓存的情况下打开链接时失败

我已经尝试了所有方法，有人知道会发生什么吗？
我使用select2的自定义绑定处理程序（在引导环境中）：



尽管它看起来太复杂了，我还是在这里发布了自定义绑定代码：

        ko.bindingHandlers["selectbox"] = {
        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            return { controlsDescendantBindings: true };
        },
        update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            var nullValue = ["Unselected"];

            var options = valueAccessor(), value = options.value, values = (ko.unwrap(options.values) || []).map(function (item) {
                return { id: ko.unwrap(item[options.lookupId || "id"]), text: ko.unwrap(item[options.lookupText || "text"]) || "(undelected)" };
            }), getId = (function (object) {
                return object.id;
            }), findValue = options.findValue || (function (id) {
                //console.log(id, values.filter((object) => { console.log(getId(object)); return getId(object) == id; }));
                return values.filter(function (object) {
                    return (getId(object) == id) || (id == '' && getId(object) == null);
                })[0];
            }), initialValue = (options.mode === "id" ? findValue(ko.unwrap(value)) : ko.unwrap(value)) || { text: "(undefined)" };

            //console.log(value());
            var $selectContainerTemplate = $("<div class='input-group' />");
            var $selectTemplate = $("<input type='hidden' style='width: 100%;' />");
            $selectContainerTemplate.append($selectTemplate);

            values = [{ id: null, text: "(undefined)" }].concat(values);

            $(element).children().remove();
            $(element).append($selectTemplate);
            $selectTemplate["select2"]({
                initSelection: function (element, callback) {
                    callback(ko.unwrap(initialValue));
                },
                data: values,
                id: getId
            });
            $selectTemplate.change(function (event) {
                //alert(event.val);
                var newValue = findValue(event["val"]);
                if (options.mode === "id") {
                    newValue = newValue["id"];
                }
                if (ko.isObservable(value)) {
                    value(newValue);
                } else {
                    value = newValue;
                }
            });
        }
    };

ko.bindingHandlers[“selectbox”]={
init：函数（元素、valueAccessor、allBindings、viewModel、bindingContext）{
返回{ControlsDescentBindings:true}；
},
更新：函数（元素、valueAccessor、allBindings、viewModel、bindingContext）{
var nullValue=[“未选择”]；
var options=valueAccessor（），value=options.value，values=（ko.unwrap（options.values）| |[]）.map（函数（项）{
返回{id:ko.unwrap（item[options.lookupId | | |“id”]），text:ko.unwrap（item[options.lookupText | |“text”]））| |（未选中）}；
})，getId=（函数（对象）{
返回object.id；
})，findValue=options.findValue | |（函数（id）{
//log（id，values.filter（（object）=>{console.log（getId（object））；return-getId（object）==id；}））；
返回值.过滤器（函数（对象）{
return（getId（object）==id）| |（id=''&&getId（object）==null）；
})[0];
})，initialValue=（options.mode==“id”？findValue（ko.unwrap（value））：ko.unwrap（value））| |{文本：“（未定义）”}；
//log（value（））；
变量$selectContainerTemplate=$（“”）；
变量$selectTemplate=$（“”）；
$selectContainerTemplate.append（$selectTemplate）；
值=[{id:null，文本：“（未定义）”}].concat（值）；
$（元素）.children（）.remove（）；
$（元素）。追加（$selectTemplate）；
$selectTemplate[“select2”]({
initSelection:函数（元素，回调）{
回调（ko.unwrap（initialValue））；
},
数据：价值观，
id:getId
});
$selectTemplate.change（函数（事件）{
//警报（event.val）；
var newValue=findValue（事件[“val”]）；
如果（options.mode==“id”）{
newValue=newValue[“id”]；
}
if（可维护的高值）{
价值（新价值）；
}否则{
值=新值；
}
});
}
};

希望，这会有所帮助。
一个更简单的方法是告诉RequireJS，KnockoutJS取决于select2，即使这不是事实

        'shim': {
            'select2': {
                deps: ['jquery'],
                exports: '$.select2'
            },
            'ko' : {
                deps: ['select2']
            }
         }

我们说的是同一个插件吗？辩护地。初始化代码是“$selectTemplate[“select2”]（{…某些选项…}）；”，其中“$selectTemplate”是jquery包装器。作为项目列表，我使用[{id:1，text:'text'}]对象数组。我的案例是查找链接对象。我设法使其部分工作，但仍然没有选择正确的初始值。正在处理它…在选项“selectbox:{value:selectedValueId…”-“selectedValueId”中是模型中某个字段的名称，用作初始值，并用作更改选择后存储所选值的字段。请确保是，但我认为问题在于从服务器获取数据的ajax中。select2在selectedValueId获取任何实际值之前绑定。即使在完成请求时，也会elect2不采用正确的值，但如果我手动设置，例如：svm.selectedId（5），则会触发更改事件
        'shim': {
            'select2': {
                deps: ['jquery'],
                exports: '$.select2'
            },
            'ko' : {
                deps: ['select2']
            }
         }