HTML and JS (non-minified versions)
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- <ember> -->
<script type="text/javascript" src="assets/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/lib/ember.js/ember.min.js"></script>
<!-- </ember> -->
<!-- <app> -->
<script type="text/javascript" src="assets/js/templates.min.js"></script>
<script type="text/javascript" src="assets/js/app.min.js"></script>
<!-- </app> -->
</body>
</html>
app.min.js
window.App = Ember.Application.create();
templates.min.js (the templates are compiled using gulp-ember-templates)
Ember.TEMPLATES["index"] = Ember.Handlebars.template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
return "";
},"useData":true});
Description
When opening the page in a browser, the following error occurs:
Uncaught TypeError: template.buildRenderNodes is not a function
I'm using the latest version of both Ember and jQuery. When searching for this error I found people having this issue whilst upgrading to Ember 1.13, but I'm using Ember 2.0.0 and didn't call any deprecated method on purpose, actually I'm only using my generated templates (which are empty, because I didn't put any content in yet; see above) and Ember.Application.create().
I also found out that Ember works when including ember-template-compiler.js and keeping the templates uncompiled inside the HTML (using the Handlebars-script-tags).
Question
Is it a bug in Ember or am I missing something? It seems like it should work.
You are using a version of Ember that is using the new Handlebars compatible templating engine HTMLBars. To make sure your templates compile using this new syntax you will need to add the isHTMLBars: true option into the Gulp task for gulp-ember-templates, more formation can be found in the README.
Related
I followed angular2 tutorial https://angular.io/docs/ts/latest/tutorial/.
I didnt want it run under node.js lite-server, but under django.
I managed to finish it and its working BUT: everytime I import any angular module eg. in index.html:
System.import('static/dist/js/main')
.then(null, console.error.bind(console));
or in main.ts:
import {AppComponent} from './app.component'
or everywhere, javascript application is trying to load some js resource like static/dist/js/main file which doesnt exist of course, because the compiled file is named main.js not main.
When I add the extensions '.js' like:
System.import('static/dist/js/main.js')
.then(null, console.error.bind(console));
or
import {AppComponent} from './app.component.js'
It suddenly works, but ts to js compiler (npm run tsc) is throwing error (even throught its compiling) and my IDE is underlining imports as errors.
This is my full index.html:
{% verbatim %}
<html>
<head>
<base href="/">
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="static/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="static/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="static/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="static/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="static/node_modules/systemjs/dist/system.src.js"></script>
<script src="static/node_modules/rxjs/bundles/Rx.js"></script>
<script src="static/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="static/node_modules/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('static/dist/js/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
{% endverbatim %}
I checked this Angular2 Typescript app throws 404 on components when js extension not specified but it didnt helped me.
Does anyone have an idea, please?
Assuming you have configured tsc to output your code to the 'static/dist/js' folder you should be able to configure Systemjs like this:
<script>
System.defaultJSExtensions = true;
System.config({
baseURL: "./static/dist/js"
});
System.import("main")
</script>
I have an Ember application running with hadlebars. I have several ember templates in my HTML page, but I ran into a slight dilemma - I can't escape an HTML code within script tag. I am looking to insert a non-working raw HTML into script tag for illustrative purposes. Will it be of help by using .hbs file method? I would prefer not to use .hbs method.
<script type="text/x-handlebars" data-template-name="name">
<html>
<head>
so on....
</head>
</html>
</script>
Thank you.
You can do this exactly the same way you would do it in normal HTML: escape the HTML entities:
<script type="text/x-handlebars" data-template-name="name">
<html>
<head>
so on....
</head>
</html>
</script>
I'm new to ember.js (but I know MVC from my CakePHP experiences and JS as well)
and in the last 2 weeks I build a little app at work which loads
sideloaded JSON data with the REST-Adapter. I added some buttons with actions
and everything works fine and I learned a lot, but it takes time to figure out the details.
All my controllers, routes and models are not organised at the moment in a folderstruture
which is described in the ember.js-Guide: http://guides.emberjs.com/v1.12.0/concepts/naming-conventions/
Now I want to move the files to the folderstructure. But then the application does not work.
It seems to my that the resolver can not finde the files at runtime. But why?
An easy example which does not work:
in "app.js" (loaded with -tag in "index.html"):
App = Ember.Application.create({
LOG_RESOLVER: true // just for debugging
});
in "router.js" (loaded with -tag after "app.js" in "index.html"):
App.Router.map(function(){
this.route('mytest');
});
in "routes/mytest.js":
export default Ember.Route.extend({
setupController: function(controller) {
controller.set('title', "Hello world!");
}
});
in "controllers/mytest.js":
export default Ember.Controller.extend({
appName: 'mytest'
});
in "indes.html":
<script type="text/x-handlebars">
{{#link-to 'mytest' }}Mytest{{/link-to}}<br/>
{{outlet}}
</script>
<script type="text/x-handlebars" id="mytest">
mytest Template
<h1>appName: {{appName}}</h1>
<h2>title: {{title}}</h2>
</script>
The Handlebar-template "mytest" is showen, but {{appName}} and {{title}} are empty.
If I moved the "mytest"-Template to "templates/mytest.hbs" nothing is showen.
Seems to my that the resolver does not work. Or something wrong with the naming-conventions Guide?
My another assumption:
Resolver-Stuff only works when using a buildprocess like in ember-cli.
Using "ember-1.12.1.debug", "ember-template-compiler-1.12.1"
Thanks for help.
-update-
Here the "index.html" - simple example:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
</head>
<body>
<script type="text/x-handlebars">
{{#link-to 'mytest' }}Mytest{{/link-to}}<br/>
{{outlet}}
</script>
<script type="text/x-handlebars" id="mytest">
mytest Template
<h1>appName: {{appName}}</h1>
<h2>title: {{title}}</h2>
</script>
<script src="libs/jquery-2.1.4.js"></script>
<script src="libs/ember-template-compiler-1.12.1.js"></script>
<script src="libs/ember-1.12.1.debug.js"></script>
<script src="app.js" ></script>
<script src="router.js" ></script>
</body>
</html>
At the moment I guess that the ember.js guide about naming conventions (guides.emberjs.com/v1.12.0/concepts/naming-conventions) left out, that "Ember.js uses a runtime resolver to wire up your objects without a lot of boilerplate" only works with "ember-cli" or the older "ember app kit" or another tool, but not when the application is running. So no JS-Files will be loaded from the server from while running the JS-application.
I am trying to implement the instafeed tutorial to just show some instagram pictures.
I am working on PyCharm using Django.
Here is my folder hierarchy:
/test_project/js/instafeed.min.js
I have a suspicion that I am not referencing the 'src' correctly. I had 'Cannot resolve directory' warnings before, but I got them to disappear by playing around with the Source preferences.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
</style>
<script type="text/javascript" src="/js/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'b8dacdbf587f41798d8dfb03e3f7a29',
useHTTP: true
});
feed.run();
</script>
</head>
<body>
<div id="instafeed">
</div>
</body>
</html>
I used the 'useHTTP:true' because I saw on another answer that this needs to be set to true to work on a local machine. I've looked at how the code was used in other tutorials and implementations, but I don't see how my code is any different.
Thanks for the help!
Instafeed needs jQuery (the documentation says that you don't need, but i got some errors without it), so make sure you have both libs loaded correctly.
Try with this:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdn.lukej.me/instafeed.js/1.2.0/instafeed.min.js"></script>
An HTML template is passed to Coldfusion. The head tag of the template has additional attribute:
<head profile="http://abc.com">
The issue is that when generating the output based on this template Coldfusion injects its scripts inside the head tag:
<head <script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>
profile="http://abc.com">
This causes profile="http://abc.com"> to appear on the top of the page and prevents page from validation.
The code injection occurs only when there is a form tag. The wrong-place injection does not happen if the head tag does not have any attributes. The presence of the attribute is a project requirement and cannot be omitted.
Is it possible to prevent Coldfusion from injecting the scripts?
The script injection only happens for cfforms, not standard forms. If you aren't using any of cfform's enhancements, you can simply switch to a standard form.
I checked the cumulative hotfix list, and didn't see a fix for this.
My Solution: Put the meta tag right after the
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<head>
when CF creates the page it puts the tag below the but above the tags
<!DOCTYPE html>
<html class=" ext-strict">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript">/* <![CDATA[ */_cf_loadingtexthtml="<img alt=' ' src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'/>";
_cf_contextpath="";
_cf_ajaxscriptsrc="/CFIDE/scripts/ajax";
_cf_jsonprefix='//';
_cf_clientid='9851DA49BD375D9722A9D6B1951976AC';/* ]]> */</script><<script type="text/javascript" src="/CFIDE/scripts/ajax/yui/yahoo-dom-event/yahoo-dom-event.js"></script>