requrejs模块总是未定义为knockout.bindings



我正试图在代码中加载一些敲除的自定义绑定,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正确加载时工作,你就不需要它了。

最新更新