如何通过从浏览器js控制台触发的require.js重新加载文件

时间:2013-11-13 22:50:33

标签: javascript jquery requirejs google-chrome-devtools

在初始应用程序启动时由require.js加载文本文件(下划线模板):

define(['text!templates/template.html'], function(Template){ ... };

当我现在正在对此文件进行更改并希望重新加载该单个文件而不必重新加载整个页面并重新启动整个应用程序时,这可能吗?

我想从浏览器的javascript控制台触发这个。

用例是通过require.js加载下划线模板的场景,当对其中一个模板文件进行更改时,我可以轻松地将新文件“注入”到正在运行的应用程序,手动触发视图渲染方法并查看更改无需从一开始就重新加载所有内容。

感谢您的想法。

1 个答案:

答案 0 :(得分:13)

一般来说,RequireJS不是为重新加载模块而设计的。

但是,如果您仔细设计应用程序,可以让RequireJS重新加载某些模块。这是一个例子:

<body>
  <p id="contents">Nothing loaded.</p>
  <button id="reload">Reload</button>
  <script>
    require.config({
        baseUrl: "./js",
        paths: {
            jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
        }
    });
    require(["jquery"], function ($) {
        var $contents = $("#contents");
        function reload() {
            require.undef("text!../file.html");
            require(["text!../file.html"], function (file) {
                $contents.empty();
                $contents.append(file);
            });
        }
        $("#reload").click(reload);
    });
  </script>
</body>

关键是在重新加载之前调用require.undef取消定义模块。

我有repo说明了整件事。如果编辑file.html文件并单击“重新加载”按钮,则段落的文本将替换为文件的内容。要获得可以从控制台调用的功能,只需将其分配到window字段(例如window.reload)。

该按钮应该被称为加载/重新加载(因为它执行初始加载重新加载)但我不打算修复它。