我们第一次加载requirejs模块时,我的视图模型中的observable似乎没有被更新。但是当你评论$("#ddl").select2();
时,一切正常。
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']);
第一次打开没有缓存的链接时,JSFiddle上有一个实时例程失败。
我已经尝试了一切,任何人都对可能发生的事情有所了解?
答案 0 :(得分:2)
我为select2使用自定义绑定处理程序(在引导程序环境中):
<div data-bind="selectbox: { value: selectedValueId, values: values || [{id: 1, text: 'text'}], lookupId: 'id', lookupText: 'text', mode: 'id' }"/>
尽管它似乎太复杂了,但我在这里发布自定义绑定代码:
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;
}
});
}
};
希望,这有帮助。
答案 1 :(得分:1)
更简单的方法是告诉RequireJS KnockoutJS依赖于select2,即使它不是真理。
'shim': {
'select2': {
deps: ['jquery'],
exports: '$.select2'
},
'ko' : {
deps: ['select2']
}
}