Question

我正在尝试在我的代码中加载一些淘汰自定义绑定，并且90％的时间它会出现错误：“消息：undefined不是函数”。一旦进入蓝色月亮，它将起作用。

注意：我恢复到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.bindings下次失败。

Answer 1

至少你需要bootDatepicker的垫片，因为它取决于jQuery：

bootDatepicker: ["jquery"]

如果没有这个垫片，您就会得到您在问题中报告的内容。有时它可以工作，有时它不起作用，当它不起作用时$(...).datepicker未定义。

我查看了源码，但我不清楚它是否还需要加载Bootstrap的JS代码。我想如果你的GUI在正确加载bootDatepicker时工作正常，你就不需要了。

requirejs模块总是与knockout.bindings一起定义

1 个答案: