從.js文件調用內部Javascript函數

Question

我正在研究ASP.NET MVC 4應用程序。 我正在使用GetUikit CSS庫，該庫還提供了一些基本的javascript / jQuery驅動的東西。 我正在使用實際上正在工作的Off canvas組件。

Getuikit： https ： //github.com/uikit/uikit http://getuikit.com/index.html

Offcanvas組件： http ：//getuikit.com/docs/offcanvas.html

我可以通過錨標簽將其稱為廣告畫布。 完全沒有問題。 我希望能夠從JavaScript隱藏和顯示offcanvas區域。 我已經在UIKit提供的.js文件中找到了特定的Javascript部分。 本節如下所示：

(function($, UI) {

"use strict";

var $win      = $(window),
    $doc      = $(document),
    Offcanvas = {

    show: function(element) {

        element = $(element);

        if (!element.length) return;            

        var doc       = $("html"),
            bar       = element.find(".uk-offcanvas-bar:first"),
            rtl       = ($.UIkit.langdirection == "right"),
            dir       = (bar.hasClass("uk-offcanvas-bar-flip") ? -1 : 1) * (rtl ? -1 : 1),
            scrollbar = dir == -1 && $win.width() < window.innerWidth ? (window.innerWidth - $win.width()) : 0;

        scrollpos = {x: window.scrollX, y: window.scrollY};

        element.addClass("uk-active");

        doc.css({"width": window.innerWidth, "height": window.innerHeight}).addClass("uk-offcanvas-page");
        doc.css((rtl ? "margin-right" : "margin-left"), (rtl ? -1 : 1) * ((bar.outerWidth() - scrollbar) * dir)).width(); // .width() - force redraw

        bar.addClass("uk-offcanvas-bar-show").width();

        setTimeout(function() {
            /*SELF ADDED FOR ARROW*/
            var elementArrow = document.getElementById('notification-arrow');
            $(elementArrow).css("display", "inline-block");
            /*--------------------*/
        }, 250);


        element.off(".ukoffcanvas").on("click.ukoffcanvas swipeRight.ukoffcanvas swipeLeft.ukoffcanvas", function(e) {                


            var target = $(e.target);

            if (!e.type.match(/swipe/)) {

                if (!target.hasClass("uk-offcanvas-close")) {


                    if (target.hasClass("uk-offcanvas-bar")) return;
                    if (target.parents(".uk-offcanvas-bar:first").length) return;
                }
            }



            e.stopImmediatePropagation();
            Offcanvas.hide();
        });



        $doc.on('keydown.ukoffcanvas', function(e) {
            if (e.keyCode === 27) { // ESC
                Offcanvas.hide();
            }
        });


    },

    hide: function(force) {

        var doc   = $("html"),
            panel = $(".uk-offcanvas.uk-active"),
            rtl   = ($.UIkit.langdirection == "right"),
            bar   = panel.find(".uk-offcanvas-bar:first");

        if (!panel.length) return;

        /*SELF ADDED FOR ARROW*/
        $('#notification-arrow').css("display", "none");
        /*--------------------*/

        if ($.UIkit.support.transition && !force) {

            doc.one($.UIkit.support.transition.end, function() {
                doc.removeClass("uk-offcanvas-page").attr("style", "");
                panel.removeClass("uk-active");
                window.scrollTo(scrollpos.x, scrollpos.y);
            }).css((rtl ? "margin-right" : "margin-left"), "");

            setTimeout(function(){
                bar.removeClass("uk-offcanvas-bar-show");
            }, 50);

        } else {
            doc.removeClass("uk-offcanvas-page").attr("style", "");
            panel.removeClass("uk-active");
            bar.removeClass("uk-offcanvas-bar-show");
            window.scrollTo(scrollpos.x, scrollpos.y);
        }

        panel.off(".ukoffcanvas");
        $doc.off(".ukoffcanvas");
    }

}, scrollpos;


var OffcanvasTrigger = function(element, options) {

    var $this    = this,
        $element = $(element);

    if($element.data("offcanvas")) return;

    this.options = $.extend({
        "target": $element.is("a") ? $element.attr("href") : false
    }, options);

    this.element = $element;

    $element.on("click", function(e) {
        e.preventDefault();
        Offcanvas.show($this.options.target);
    });

    this.element.data("offcanvas", this);
};

OffcanvasTrigger.offcanvas = Offcanvas;

UI["offcanvas"] = OffcanvasTrigger;


// init code
$doc.on("click.offcanvas.uikit", "[data-uk-offcanvas]", function(e) {

    e.preventDefault();

    var ele = $(this);

    if (!ele.data("offcanvas")) {
        var obj = new OffcanvasTrigger(ele, UI.Utils.options(ele.attr("data-uk-offcanvas")));
        ele.trigger("click");
    }
});

})(jQuery, jQuery.UIkit);

我在Stackoverflow上發現了一個類似的線程（ 如何訪問此腳本的內部函數？ ），這表明我需要使用以下方法：

jQuery.UIkit.offcanvas.offcanvas.show('#alerts-canvas');

其中#alerts-canvas alerts #alerts-canvas是我的畫布區域的ID。 當我嘗試從javascript調用此函數時，出現以下Javascript錯誤： Uncaught TypeError: Cannot read property 'offcanvas' of undefined 。

我不知道我在做什么錯，但是我真的希望這會成功，因為我真的需要這樣做。

我確保腳本已鏈接（一般_Layout頁中的所有頁面都會發生這種情況。

你們知道我在做什么錯嗎？

Answer 1

嘗試

$.UIkit.offcanvas.show('#alerts-canvas');