Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to reload a file via require.js triggered from the browsers js console

Having a text file (underscore templates) loaded by require.js on initial app start:

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

When i am now making changes to this file and want require to reload that single file without me having to reload the whole page and restart the whole app, is this possible?

I'd like to trigger this from the javascript console in the browser.

Use case is a scenario with underscore templates loaded via require.js, when making changes to one of those template files i could easily "inject" the new file to the running app, trigger the views render method manually and see the changes without having to start from the very beginning by reloading everything.

Thanks for your ideas.

like image 335
homtg Avatar asked Nov 13 '13 22:11

homtg


People also ask

How to reload js file in browser?

Hit CTRL-F5 or CTRL-SHIFT-R in most modern browsers to force reload. Use the developer's console to clear the cache.

What does location reload() do?

The location. reload() method reloads the current URL, like the Refresh button. The reload may be blocked and a SECURITY_ERROR DOMException thrown. This happens if the origin of the script calling location.

Is there a JavaScript function to refresh page?

JavaScript Refresh Page: Main Tips The location. reload() method reloads the current web page. The method gives the exact same result as pressing the RELOAD button in your browser. The JavaScript reload page method loads the page from the cache by default.

How to reload JavaScript in Firefox?

I use Ctrl + F5 . It's like a force refresh. This refreshes the page including re-downloading any referenced JavaScript files or CSS files even if they were cached.


1 Answers

RequireJS is not designed for reloading modules, generally speaking.

However, if you design your application carefully you can get RequireJS to reload some modules. Here's an example:

<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>

The key is to call require.undef to undefine the module before reloading it.

I've got a repo illustrating the whole thing. If you edit the file.html file and hit the "Reload" button, the text of the paragraph will be replaced with the contents of the file. To get a function you can invoke form the console just assign it to a field of window (e.g. window.reload).

The button should really be called Load/Reload (because it does the initial loading and the reloading) but I'm not going to fix it.

like image 169
Louis Avatar answered Sep 22 '22 10:09

Louis