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.
Related
I want to make an application for which I use ReactJS for front-end and Laravel for the back-end. I have both ready, the Laravel part is done and so is the ReactJS.
I tried the most stupid thing a sane person would do, copy-paste ReactJS build folder to the Laravel's views folder and Laravel's assets folder. It does not seem to be working. It says missing references to all JavaScript and CSS files.
I changed index.html into index.blade.html.
And, I thought, perhaps, I linked to a wrong path for CSS and the JavaScript. I changed /static/css/main.ac1cfcf0.css to main.ac1cfcf0.css and /static/js/main.551bf7d2.js to main.551bf7d2.js in my index.blade.html but I still receive the same error.
What can I do to integrate the front-end and back-end into one project properly?
If you're using Laravel Mix, you can easily create and transform your JS files to use ES6 and React: https://laravel.com/docs/5.5/mix#react
In your webpack.mix.js file, compile your assets like this:
mix.react('resources/assets/js/react-app.jsx', 'public/js');
Then, in your blade file, bring in your bundle like this:
<script type="text/javascript" src="{!! asset('js/react-app.min.js') !!}"></script>
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.
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.
I want to include javascript files from whole folder and subfolders into a single ASP.NET Bundle. The purpose of this is to load all files from that folder at once.
The idea is to create an angular application and load all app files with a single bundle.
Is this idea ok ?
The problem I have is that the Script tags added to HTML don't respect the subfolder strucutre of my application and the files can't be found.
Bundle config:
bundles.Add(new ScriptBundle("~/bundles/app").IncludeDirectory(
"~/app", "*.js", true));
Folder Structure
app
controller/appMenu.js
modules/navigation.js
app.js
On client side the included tags look like this:
<script src="/app/appMenu.js"></script>
<script src="/app/navigation.js"></script>
I think it might be related to this:
http://aspnetoptimization.codeplex.com/workitem/105
What version of the System.Web.Optimizations assembly are you using?