I get the error GET localhost:8080/scripts/templates/home/homeTemplate.html 404 (Not Found)
Not sure why this is happening. Based on this tutorial I feel like files are in the right place. http://backbonetutorials.com/organizing-backbone-using-modules/
The github repository is here https://github.com/natecraft1/backbone-widget
I reference the template like this
'text!templates/home/homeTemplate.html'
from app/templates/home...
Modify the scripts/main.js as follows.
require.config({
paths: {
jquery: 'libs/jquery',
underscore: 'libs/underscore',
backbone: 'libs/backbone',
templates: '../templates' // added
}
});
require(['app'], function(App) {
App.initialize();
});
By setting the templates as above,
if the module ID starts with "templates",
requirejs load the module from the templates directory
Without the above templates setting, requirejs load any module IDs from scripts directory, which contains main.js source code. Thus the text!templates/home/homeTemplate.html is interpreted as wrong URL scripts/templates/home/home/homeTemplate.html.
If you do not want to modify the main.js script,
you can specify the correct location of homeTemplate.html by
replacing the 'text!templates/...' with
'text!../../../templates/home/homeTemplate.html' or
'text!/../templates/home/homeTemplate.html'
Related
I'm working on the #fortAwesome/ember-fontawesome addon. I'd like to be able to find the icons that have been used in templates and include the necessary JS into the final build.
Template:
{{fa-icon icon='bacon'}}
I can use
setupPreprocessorRegistry(type, registry) {
registry.add('htmlbars-ast-plugin', {
name: 'font-awesome-detect-static-icons',
plugin: staticIconDetector,
});
},
This works to discover the icons, but the preprocessors don't do their work until all the other hooks like postprocessTree or treeForVendor have already run. Is there another way to get at the AST of the templates before the other hooks run? Or another way to get at this information?
I am defining the AMD module under OSGi module. I have to read host property in AMD loader definition. how can I read the property from portal-ext.properties file?
below is sample code how I am defining the AMD module and property in portal-ext.properties file.
portal-ext.properties
# host detail
host={{host_url}}
define AMD module
Liferay.Loader.define('genelec-shopping-cart', [], function(){
const host = ""; //here i have to read the property
return{
getHost:function(){
return host;
},
};
});
You can do this with ftl or jsp, building your JS with the value embedded.
Instead of creating the whole code from a JSP you can also just build a small portion of it, adding the value to a JS variable, making it available for scripts that will load later.
Let's say you have an OSGi module which JS code, you can create a .js.jsp that will build the JS before sending it.
Using JSP to create a small portion of JS:
<%# page contentType='application/javascript' %>
//here i have to read the property -> do it in java
Liferay.Loader.define('genelec-shopping-cart', [], function(){
const host = "${read_in_java}";
return{
getHost:function(){
return host;
},
};
});
You can include it from other JSP files as:
<c:url var='url' value='/variables.js.jsp'>
<c:param name='namespace' value='${namespace}'/>
</c:url>
<script src='${url}'></script>
But as you mentioned the host, you are probably looking for something much simpler than that (especially because this is kind of a hack), using Liferay's JS api:
Liferay.ThemeDisplay.getPortalURL() and friends, docs here:
https://dev.liferay.com/de/develop/tutorials/-/knowledge_base/7-1/liferay-javascript-apis
I am using the Zurb Fonudation framework. When I place a JavaScript framework such as snap.svg in the src/assets/js folder it will automatically get compiled into the app.js file. So far I've had one jQuery plugin that I've tried to use that is broken, and also snap.svg that gets broken. I'm assuming this has something to do with babel. For example with snap.svg I get the following error..
snap.svg.js:420 Uncaught TypeError: Cannot set property 'eve' of undefined
I've tried placing the path to snap.svg in the config.yml file but that doesn't seem to make any difference other than where snap.svg is located within app.js
I'm assuming I'm just not doing something right. Any ideas?
You can tell babel to not transpile particular pieces of code by passing the 'ignore' flag to it within the build process. E.g.:
function javascript() {
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel({ignore: ['src/assets/js/snap.svg']}))
.pipe($.concat('app.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}
You can see more about customizing the build process in this forum post: http://foundation.zurb.com/forum/posts/36974-enhancing-foundation-with-bower-components
I have just started to refactor our Ember application to use Pods so that our directory/file structure is more manageable. At the same time i have upgraded Ember-Cli so I am running with the following configuration:
Ember : 1.8.1
Ember Data : 1.0.0-beta.12
Handlebars : 1.3.0
jQuery : 1.11.2
I have updated the the environment.js to include the following
modulePrefix: 'emberjs',
podModulePrefix: 'emberjs/pods',
I have also tried to set it to 'app/pods' and just 'pods' but with no luck.
The directory structure is as follows:
emberjs/
app/
controllers - original location, still has some original controllers here for other parts of the system
pods/
job/
parts/
index/
controller.js
route.js
template.hbs
edit/
controller.js
route.js
template.hbs
The application build ok and if i look in the emberjs.js file i can see the various defines for the pods controllers, routes and templates
e.g.
define('emberjs/pods/job/parts/index/controller', ['exports', 'ember'], function (exports, Ember) {
define('emberjs/pods/job/parts/index/route', ['exports', 'ember'], function (exports, Ember) {
define('emberjs/pods/job/parts/index/template', ['exports', 'ember'], function (exports, Ember) {
so something is recognising the pods structure.
But the problem comes when I try to access this route. I get a warning message in the console and get nothing displayed - basically it says it can find the template abd it looks like it is using an generated controller.
generated -> controller:parts Object {fullName: "controller:parts"}
vendor-ver-1423651170000.js:28585 Could not find "parts" template or view. Nothing will be rendered Object {fullName: "template:parts"}
vendor-ver-1423651170000.js:28585 generated -> controller:parts.index Object {fullName: "controller:parts.index"}
vendor-ver-1423651170000.js:28585 Could not find "parts.index" template or view. Nothing will be rendered Object {fullName: "template:parts.index"}
vendor-ver-1423651170000.js:28585 Transitioned into 'jobs.job.parts.index'
If I look in the Ember inspector in Chrome I see that in the Routes section it shows parts/index to have route of parts/index controller as parts/index and template as parts/index.
Is this what I should expect?
I am not sure how Ember resolves the various parts when using pods.
To test this out I put a copy of the template in the templates/parts directory and reloaded it. This time it found the template and rendered it but lacking the data - probably due ti it using the default route and controller.
Does anyone any idea what I am doing wrong. have I missed out a step somewhere, or configured it incorrectly?
Try removing old routes/controllers/templates when adding new ones. Don't keep two copies.
Also it could be unrelated to your files structure. Try creating a blank app and copying files one by one, to see when the issue starts to happen. Use generators and then overwrite the generated files with yours if possible.
So I decided to give Grunt a try to precompile my templates for me. I am having trouble setting everything up. Here is what I have inside my Gruntfile.js:
grunt.loadNpmTasks('grunt-ember-templates');
emberTemplates: {
compile: {
options: {
templateBasePath: "templates/",
templateName: function(name) {
return name.replace('_','/');
}
},
files: {
"templates/templates.js": ["templates/*.hbs"]
}
}
}
watch: {
emberTemplates: {
files: 'templates/*.hbs',
tasks: ['emberTemplates', 'livereload']
},
}
I believe this is fine since I referenced the document. My package.json has the dev-dependencies. However when I try do grunt --help, no available tasks show up.
Here are some points to be noted:
Templates are required to be loaded to Ember.TEMPLATES not Handlebars.Templates.
You should use Ember.Handlebars.compile rather Handlebars.compile. You think its just a wrapper but it may be doing more with extra ember helpers and all.
Also I answered how can we go with template compiling with multiple files. Following link may be useful
ember hbs templates as separate files
So, it turns out that I was not aware of the order for putting code inside the Gruntfile.js. I was supposed to
put the emberTemplates inside the grunt.initConfig()
load the NPMtask then
register the task