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);。エラーは次のとおりです。

オブジェクト [object Object] にはメソッド「datetimepicker」がありません

これが開発では機能するのに本番環境では機能しない理由がわかりません。本番環境では、datetimepicker JavaScript が見つからないようです。

4

1 に答える 1

0

バンドルされているベンダー スクリプト ファイルを確認しましたか? バンドルに失敗すると、バンドルされたファイルの先頭にエラーが報告されます。

また、同様の問題が発生し、toastr.js のバンドルが失敗することがわかりました。そのファイルをバンドルから削除して定期的に追加すると、機能する可能性があります。

BundleTable.EnableOptimizations = true;RegisterBundles メソッドの最後に追加することで、開発中に強制的にバンドルできます。

于 2013-08-06T08:19:48.897 に答える