时间戳

首页 > 解决方案 > 正确地将 javascript 添加到剃须刀页面

javascript - 正确地将 javascript 添加到剃须刀页面

问题描述

我有一个模板，我正在使用模板怪物。在文件中有一个 javascript 页面，其中包含运行页面所需的所有脚本。我已将此添加到呈现脚本的页面底部。它似乎没有访问该文件。它在页面上，当我在“检查对象”下查看它时出现。当我将代码片段直接放在剃须刀页面中时，它可以工作。任何想法为什么它不会从 javascript 文件中提取它？谢谢你的帮助。编辑这位于 _Layout 页面中。菜单在哪里。

插入剃刀页面时，以下内容有效。 

<script type="text/javascript">
    $(document).ready(function () {

        $(".sticky-menu").sticky({ topSpacing: 0 });

    });

    $(window).on('load', function () {
        function fadeOut(el) {
            el.style.opacity = 0.4;
            var last;
            var tick = function () {
                el.style.opacity = +el.style.opacity - (new Date() - last) / 600;
                last = +new Date();
                if (+el.style.opacity > 0) {
                    (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 100);
                } else {
                    el.style.display = "none";
                }
            };
            tick();
        }
        var pagePreloaderId = document.getElementById("page-preloader");
        setTimeout(function () {
            fadeOut(pagePreloaderId)
        }, 1000);
    });

</script>

这就是我在剃须刀页面中无法使用的内容

 @Scripts.Render("~/Scripts/scripts.js")

顶部代码位于“scripts.js”文件中。

这个文件中有很多代码，似乎没有一个工作。这意味着它就像没有访问脚本。页面中加载的所有脚本与模板中的常规 HTML 的顺序相同。模板 HTML 文件有效。

更新 -

我通过将其移出脚本页面并移至布局页面来实现此功能。我仍然不确定为什么或是什么导致此代码段在脚本页面中不起作用。这似乎是唯一不起作用的部分。

在脚本文件中是这样写的：

(function($) {
'use strict';

jQuery(document).on('ready', function() {
  ////// Other snippets //////

      $(".sticky-menu").sticky({
        topSpacing: 0
       });
  ////// Other snippets //////

 });

在 _Layout 页面中，它看起来像这样：

 <script type="text/javascript">
        $(document).ready(function () {

            $(".sticky-menu").sticky({ topSpacing: 0 });

            var hub = $.connection.notificationHub;
            $.connection.hub.start()
                .done(function () {
                    console.log("Hub Connected!");

                })
                .fail(function () {
                    console.log("Could not Connect!");
                });
        });
 </script>

我仍然不知道为什么这在脚本文件中不起作用......

更新 - 2019 年 4 月 26 日

我发现了问题。模板是使用早期版本的 jQuery 创建的。我发现脚本文件在我删除时加载并部分工作

jQuery(document).on('ready', function () {

整个文件看起来像这样

(function($) {
'use strict';

    jQuery(document).on('ready', function () { 

    ---> All the jQuery Code

    });

 })(jQuery);

我将上面的行更改为：

 }(jQuery));

我看到了一些其他的实现方式。

但是，使用 jQuery 3.3.1 有一些不对劲的地方。如果有人知道如何正确格式化它，那么它会很有帮助。

标签： javascriptmodel-view-controllerrazor-pages

解决方案

你从改变

@Scripts.Render("~/Scripts/scripts.js")

至

<script src="~/Scripts/scripts.js"></script>

它会工作

Script.Render您可以参考此链接以了解vs script 标签之间的差异

“@Script.Render”和“<script>”有什么区别？

更新：

如果您有这样的 _Layout.cshtml 视图

<html>
    <body>
        @RenderBody()
        @RenderSection("scripts", required: false)
    </body>
</html>

那么你可以有一个像这样的 index.cshtml 内容视图

@section scripts {
     <script type="text/javascript" src="~/Scripts/scripts.js"></script>
}

推荐阅读