我正试图在代码中加载一些敲除的自定义绑定,90%的时间都会出现错误:"消息:未定义不是函数"。这是千载难逢的事。
注意:我恢复到require.js 2.1.9版本,而不是2.1.11版本,加载自定义绑定模块的成功率提高了。2.1.9基本上更成功,但仍然会发生。
以下是我正在做的事情:
我有一个app.index.js文件:
requirejs.config({
baseUrl: "../Scripts/app/views/administrator/directhire",
paths: {
"app.index": "app.index",
"spinner": "../../../helpers/spinner",
"domReady": "../../../../lib/domReady",
"ko": "//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min",
"knockout.validation": "../../../../lib/knockout.validation",
"mapping": "../../../../lib/knockout.mapping-latest.debug",
"directHireHomeViewModel": "../../../viewModels/directHireHomeViewModel",
"bootDatepicker": "../../../../lib/bootstrap-datepicker",
"jquery": "//code.jquery.com/jquery-latest.min",
"toastr": "../../../../lib/toastr",
"model.navigation": "../../../models/model.navigation",
"model.directhire": "../../../models/model.directhire",
"datepicker.bindings": "../../../../lib/koBindings/datepicker.bindings"
},
shim: {
"knockout.validation": ["ko"],
"mapping": ["ko"],
"datepicker.bindings": ["bootDatepicker"]
}
});
require(["ko"], function (ko) {
//manually set the global ko property
window.ko = ko;
//then bring in knockout validation
require(["knockout.validation"], function () {
ko.validation.configure({
insertMessages: false,
decorateElement: true,
errorElementClass: 'error'
});
// Load the main app module to start the app
require(["domReady", "main.index"], function (domReady, bs) {
domReady(function () {
bs.run();
});
});
});
});
和main.index.js文件:
define(['ko', "mapping", 'spinner', 'directHireHomeViewModel', 'model.navigation', 'model.directhire', 'bootDatepicker', 'datepicker.bindings'],
function (ko, mapping, spinner, directHireHomeViewModel, Navigation, DirectHire, bootDatepicker, dateBindings) {
var
vm = new directHireHomeViewModel(),
run = function () {
spinner.start();
$.getJSON("api call", function (data) {
mapping.fromJS(data, {
create: function (options) {
return new Navigation(options.data);
}
}, vm.navigations);
});
$.getJSON("api call", function (data) {
mapping.fromJS(data, {
create: function (options) {
return new DirectHire(options.data);
}
}, vm.directhires);
}).done(function () {
ko.applyBindings(vm, document.getElementById('#administrator-direct-hire'));
spinner.goByeBye();
});
};
return {
run: run
};
});
这是自定义绑定:
define('datepicker.bindings', ['bootDatepicker', 'ko'], function (bootDatepicker, ko) {
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
console.log($(element));
var mod = require('bootDatepicker');
console.log(require.defined('bootDatepicker'));
console.log($(element).datepicker());
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options).on("changeDate", function (ev) {
var observable = valueAccessor();
observable(ev.date);
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (value != "" && value != "1/1/0001") {
$(element).datepicker("setDate", value);
}
}
};
});
此错误仅发生在删除自定义绑定时。在某些情况下,如果我有多个自定义绑定,它会在其中一个绑定上失败。即datepicker.bindings一次失败,colorpicker.bndings下一次失败。
至少您需要一个bootDatepicker
的填充程序,因为它依赖于jQuery:
bootDatepicker: ["jquery"]
如果没有这个垫片,你会得到你在问题中所报告的内容。有时它工作,有时它不工作,当它不工作时,$(...).datepicker
是未定义的。
我查看了源代码,但不清楚它是否也需要加载Bootstrap的JS代码。我想如果你的GUI在bootDatepicker
正确加载时工作,你就不需要它了。