0

我有以下 KnockoutJS 自定义绑定：

ko.bindingHandlers.dtp = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialise datetimepicker with some optional options
        var options = allBindingsAccessor().dtpOptions || {};
        $(element).datetimepicker(options);  //ERROR HAPPENS HERE IN PRODUCTION

        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "changeDate", function (event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                value(event.localDate);
            }
        });
    },
    update: function (element, valueAccessor) {
        var widget = $(element).data("datetimepicker");
        //when the view model is updated, update the widget
        if (widget) {
            widget.setLocalDate(ko.utils.unwrapObservable(valueAccessor()));
            if (widget.date) {
                widget.setValue();
            }
        }
    }
};

从 Visual Studio 以调试模式运行时，这可以正常工作。我将我的“供应商”脚本捆绑如下：

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.IgnoreList.Clear();
    AddDefaultIgnorePatterns(bundles.IgnoreList);

    var cssTransformer = new CssTransformer();
    var nullOrderer = new NullOrderer();

    bundles.Add(
      new ScriptBundle("~/scripts/vendor")
        .Include("~/scripts/jquery-{version}.js")
        .Include("~/scripts/bootstrap.js")
        .Include("~/scripts/bootstrap-datetimepicker.min.js")
        .Include("~/scripts/knockout-{version}.js")
        .Include("~/scripts/ko-realtimevalue.js")
        .Include("~/scripts/ko-datetimepicker.js")
        .Include("~/scripts/sammy-{version}.js")
        .Include("~/scripts/moment.js")                
        .Include("~/scripts/Q.js")
        .Include("~/scripts/breeze.debug.js")  
        .Include("~/scripts/breeze.savequeuing.js")
        .Include("~/scripts/toastr.js")
        .Include("~/scripts/html5shiv.js")
        .Include("~/scripts/underscore.js")
        .Include("~/scripts/modernizr-{version}.js"));

    var styleBundle = new StyleBundle("~/Content/css")
        .Include("~/Content/ie10mobile.css")
        .Include("~/Content/less/bootstrap/bootstrap.less")
        .Include("~/Content/less/bootstrap/responsive.less")
        .Include("~/Content/less/bootstrap/bootstrap-datetimepicker.less")
        .Include("~/Content/font-awesome.min.css")
        .Include("~/Content/durandal.css")
        .Include("~/Content/less/toastr.less")
        .Include("~/Content/less/app.less");

    styleBundle.Transforms.Add(cssTransformer);
    styleBundle.Transforms.Add(new CssMinify());
    styleBundle.Orderer = nullOrderer;

    bundles.Add(styleBundle);
}

当我部署到服务器并因此使用供应商脚本包时，我收到如上所示的错误：$(element).datetimepicker(options);. 错误是：

对象 [对象对象] 没有方法 'datetimepicker'

我不明白为什么这在开发中有效，但在生产中无效。似乎在生产中找不到 datetimepicker javascript。

4

1 回答 1

0

你看过捆绑的供应商脚本文件吗？当捆绑失败时，它会在捆绑文件的顶部报告错误。

另外，我遇​​到了类似的问题，发现 toastr.js 的捆绑失败。如果您从捆绑包中删除该文件并定期添加它，它可能会起作用。

BundleTable.EnableOptimizations = true;您可以通过在 RegisterBundles 方法的末尾添加来强制捆绑开发。

于 2013-08-06T08:19:48.897 回答