I am using handlebars in my application all the templates and their corresponding helperfunctions writing in .html file itself. Templates compilation happening inside my Backbone views so that means it's happening in .js file.
Before implement require.js,all my views instances are global that's why template compilation working fine but now I re-factor my views code into modules wise using require.js because of this my templates are not working while templates compilation time exceptions(Missing helper: 'setIndex') are coming. This is the way I written
index.html:
//loading library
<script type="text/javascript" src="lib/js/handlebars-v1.1.2.js"></script>
//helper function
<script>
Handlebars.registerHelper('setIndex', function(value){this.index = Number(value);});
</script>
//template
<script id="ftpBodyInitialTpl" type="text/x-handlebars-template">
{{#each bizSteps}}
{{setIndex #index}}
{{/each}}
</script>
.js file :
define(["handlebars"],function(Handlebars){
//templates compilation happening here.
});
I don't know, why it's showing Missing helper: 'setIndex' can anyone help me.
Thanks.
It looks like you are loading Handlebars without RequireJS:
<script type="text/javascript" src="lib/js/handlebars-v1.1.2.js"></script>
and then with RequireJS:
define(["handlebars"],function(Handlebars){
You did not mention a module loading error message so I'm assuming you correctly configured RequireJS to load it, and that RequireJS does load it. The problem is that you end up with two instance of Handlebars. The one loaded without RequireJS gets the setIndex helper. The one loaded with RequireJS does not. There are multiple solutions to this problem:
Load Handlebars without RequireJS and avoid loading it with RequireJS too. In this case, you'd just use the global Handlebars symbol that Handlebars exports. You don't list handlebars in the modules that your modules require.
Load Handlebars with RequireJS and avoid loading it without RequireJS. You'd have to remove the script tag that loads Handlebars and the helper would have to become an AMD module.
Load Handlebars without RequireJS and fake loading Handlebars in RequireJS. You could keep your code as it is now. You'd configure RequireJS like this:
paths: {
handlebars: "path/to/handlebars-fake.js"
}
And the handlebars-fake.js file would be:
define(function () {
return Handlebars;
});
So RequireJS would end up with the same instance of Handlebars as the one loaded with script.
Related
I am bundling 6 different modules together in Webpack. One of then is Mustache.js.
The Mustache templates live inside the HTML page. They are not in a separate file. Now when I load my page ... I get this error ...
This is my app.js file
require('mustache');
require("./js/modules.js");
require("./js/custom.js");
require('owl.carousel');
require('bootstrap');
require("expose-loader?$!jquery");
I have tried changing the order, but nothing is working.
The 'modules.js' file has a dependency on 'mustache'. So I went into the modules.js file and added require('mustache'); at the top in that file, but nothing changed. Do I need to add any additional configuration to my webpack.config.js file ?
If I take the Mustache.js modules out of the bundle and load it normally on the html page like <script src="js/mustache.js"></script> then everything works fine.
Can someone please advise how can I include this module in the bundle ? Already wasted so many hours trying to make this work, but to no avail. Many thanks in advance.
It sounds like it's working when not bundled because you reference the script directly in the DOM and Mustache is added to the global scope, in this case window.Mustache.
In your app.js or any other 'bundled' script that is referencing Mustache you'll need to require and assign to a variable:
var Mustache = require('mustache');
I have a page in my MVC application with only one JavaScript file in it. Should I bundle this file or keep it as is?
My current code
#section scripts{
<script src="~/Scripts/Custom/Home/Index.js" type="text/javascript"></script>
}
I would still suggest you put that file through bundling, advantages you get:
It will get minified for production
Should you add more javascript files later, it will be just a matter of adding those to a bundle, without ever making changes to your HTML template
Setup:
Django, currently using Django-Compressor for CSS
Nested Templates using Django templatetags to nest
RequireJS to pull in JS modules.
Example:
base.html:
<html>
...
<script src="/static/js/libs/require.js">
...
{% include "body.html" %}
...
<script>
require(['/static/js/base']);
</script>
</html>
body.html
<h1> This is the body </h1>
<script>
require(['/static/js/body']);
</script>
So with this setup none of my JS files are being compressed. I can't use Django-Compressor because it won't utilize requireJS correctly, nor can I find anything that will help in this case.
Some ideas I have come up with have been to minify the JS files in place, or to run gulp/grunt beside Django, but that would make local development ugly.
Have you considered using django-pipeline?
https://django-pipeline.readthedocs.org/en/latest/usage.html
With it's template tag to pull in JS files, you may be able to replace both RequireJS and Django-Compressor.
So i have been wondering that if i write all my templates into a single file, will Ember load all these templates at once when the application is loaded?
Say, i have this in index.html
<! -- Added all dependecies of Ember -->
<script type="text/x-handlebars" >
This is application template
</script>
<script type="text/x-handlebars" id="about">
This is about template
</script>
And my application.js
App = Ember.Application.create();
App.Router.map(function(){
this.resouce('about');
});
So lets say i visits index.html so is the about template is already loaded at this time? ,i mean what i naturally assume is that it GET the index.html page and extracts handlebar templates from it so all the templates defined in index.html should be loaded when the application boots up. Is this right? , will diving different templates into different files will rectify this?
Yes all your templates will be available at boot time with the above mentioned way.
If you want to just separate the templates for development. Just separate the templates into different 'hbs' files and use a grunt precompiler task which will compile all the templates to a single js file which you can include in your index.html. Most ember apps just precompile and concatenate all the templates and js files.
If your thinking on lazy loading the template files, you may need to implement that mechanism yourself. Matthew Beale explains on lazy loading stuff in ember.
For application structure and organization, you should really look into ember-cli.
Alright, I've got a multi-page site with page-specific modules. Each page should load two JS files generated by r.js: main.js, which is a collection of all modules available globally, and "page-name-here".js, which is a collection of the modules only needed for the current page.
I tried to pattern it somewhat off of this response to a similar question: https://stackoverflow.com/a/11730147/843490.
I also wanted to structure it so that I wouldn't have to explicitly include jQuery as a dependency in every module, but that it would just be loaded and executed first.
Build.js file: http://pastebin.com/XP2cCh18
Main.js file: http://pastebin.com/vsAnm99S
The r.js tool seems to be compiling everything correctly with all modules written into main.js and "page-name-here".js. BUT, when I load the page, require js starts bringing in EVERY global module individually even after main.js has loaded. I assume this is due to global.js not being listed explicitly as a dependency, but I'm unsure of have to tweak it to remedy this.
Any clues? Thanks!