Menu
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.
335
Hit CTRL-F5 or CTRL-SHIFT-R in most modern browsers to force reload. Use the developer's console to clear the cache.
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.
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.
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.
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.
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
