RequireJS加载自定义MVC数据注释 - 不会触发验证

Question

我刚刚使用RequireJs开始了我的第一个MVC项目。关于一些定制的MVC Dataannotations，我有一些严重的问题。我根本想不通，怎么把它连接到RequireJS。

有时它会在清除浏览器后生效。所以我认为它可能是关于如何注入脚本的。我试图重构，但似乎每次都得到相同的结果:(

它不会触发验证。

在下面你可以看到我的main.js需要配置：

require.config({
paths: {
    jquery: "../jquery-2.1.1.min",
    validate: "../jquery.validate",
    unobtrusive: "../jquery.validate.unobtrusive",
    bootstrap: "../bootstrap.min",
},
shim: {
    bootstrap: {
        deps: ["jquery"],
        exports: "bootstrap"
    },
    validate: {
        deps: ["jquery"],
        exports: "validate"
    },
    unobtrusive: {
        deps: ["jquery", "validate"],
        exports: "unobtrusive"
    },
    "plugins/bootstrap-timepicker": {
        deps: ["bootstrap"],
        exports: "timepicker"
    }
}});

我的MVC Datannotation：

define(["jquery", "validate", "unobtrusive", "plugins/bootstrap-timepicker"], function ($, validate, unobtrusive, timepicker) {
"use strict";

var _registerEventHandlers = function () {
    $.validator.addMethod("timepickercompare", function (value, element, params) {
        var destProperty = $(params.split(',')[0]);
        var optName = params.split(',')[1];

        var src = value.replace(':', '');
        var dest = destProperty.val().replace(':', '');
        var val1 = (isNaN(src) ? Date.parse(src) : eval(src));
        var val2 = (isNaN(dest) ? Date.parse(dest) : eval(dest));

        if (optName == "GreaterThan")
            return val1 > val2;
        if (optName == "LessThan")
            return val1 < val2;
        if (optName == "GreaterThanOrEqual")
            return val1 >= val2;
        if (optName == "LessThanOrEqual")
            return val1 <= val2;
    });

    $.validator.unobtrusive.adapters.add("timepickercompare", ["destpropertyname", "operatorname"], function (options) {
        options.rules["timepickercompare"] = "#" + options.params.destpropertyname + "," + options.params.operatorname;
        options.messages["timepickercompare"] = options.message;
    });

    $('.js-time-picker').timepicker({
        showMeridian: false
    });

    $('.js-time-picker').timepicker().on('changeTime.timepicker', function (e) {
        $(e.currentTarget).valid();
    });
};

return {
    init: function() {
        _registerEventHandlers();
    }
}});

App.js

define("app", ["dataannotations/timepickercompare"], function (timepickercompare) {
"use strict";

return {
    init: function() {
        timepickercompare.init();
    }
};});

HTML输入：

<form action="/Post/Create" class="validate" method="post" role="form"> <div>
      <div class="bootstrap-timepicker">
           <input class="js-time-picker js-time-picker-delivery-from input-small" data-val="true" data-val-required="required" id="startDate" name="startDate" type="text" value="">
      </div>
      <div class="bootstrap-timepicker">
           <input class="js-time-picker valid" data-val="true" data-val-timepickercompare="Enddate cannot be less then startDate" data-val-timepickercompare-destpropertyname="startDate" data-val-timepickercompare-operatorname="GreaterThanOrEqual" id="endDate" name="endDate" type="text" value="" aria-invalid="false" aria-describedby="endDate-error">
      </div>
 </div>
 </form>

脚本加载程序顺序：

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="/scripts/site/main.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="app" src="/scripts/site/app.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="dataannotations/timepickercompare" src="/scripts/site/dataannotations/timepickercompare.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="/scripts/site/../jquery-2.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="validate" src="/scripts/site/../jquery.validate.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="unobtrusive" src="/scripts/site/../jquery.validate.unobtrusive.js"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="plugins/bootstrap-timepicker" src="/scripts/site/plugins/bootstrap-timepicker.js"></script>

期待收到你们的回复，并感谢：）