I'm very new to the whole concept of a web application framework, and I started out with ember.js last night. I've followed their video tutorial on getting started and I have this problem.
Ember.js is attempting to make a GET request to access some very weird file. Here is my files and the error. The code works perfectly apart from ember making a request and getting a forbidden 403 error (due to apache blocking it for having incorrect characters)
<!-- An extract of my index.html -->
<script type="text/x-handlebars" id="shots">
{{#each}}
<h4>{{title}}</h4>
<h6>Shot ID: {{id}}</h6>
<hr />
<p>Published on the {{pubDate}} by {{author.name}}</p>
<img src="{{image}}" alt="{{description}}" />
<p>{{description}}</p>
{{/each}}
</script>
And then this is my JavaScript:
// core.js
Master = Ember.Application.create();
Master.Router.map(function() {
this.resource('home');
this.resource('shots');
});
Master.ShotsRoute = Ember.Route.extend({
model: function() {
return shots;
}
});
var shots = [{
id: '1',
title: "It Works!",
author: { name: "Luke Shiels", user: "0001"},
image: "assets/img/0001.png",
pubDate: new Date('26-11-2000'),
description: "A new shot, lol!"
}, {
id: '2',
title: "It also Works!",
author: { name: "Luke Shiels", user: "0001"},
image: "assets/img/0001.png",
pubDate: new Date('27-11-2000'),
description: "Another shot, lol!"
}];
I get the following 'errors':
http://i.imgur.com/fRLkaFQ.png (Sorry, don't have enough rep to post images)
Because of how Handlebars handles DOM updates you can't just add attributes inside of an HTML tag like you've done with the image.
<img src="{{image}}" alt="{{description}}" />
If you look at the generated HTML it will look something like:
<img src="<script id='metamorph-1-start'>someh</script>">
You need to look at the {{bindAttr}} helper instead.
<img {{bindAttr src="image" alt="description"}}/>
Related
I am attempting to build a front end web system that will run off of a third party sites database and administration console. The API seems to be entirely reliant upon GET calls, either requesting or altering information by targeting specific URLs.
The API returns XML, example:
<responseITEMs xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<ITEMs>
<ITEM libraryid="e3712df592253fcb4" featured="false" releasedate="2017-24-01 00:00:00" code="ABC001" detail="Some text" name="Dummy One" displaytitle="Dummy One" keywords="" id="1fef760bc1d61c8c" status="active" lastupdated="2016-24-01 04:53:28"/>
<ITEM libraryid="e3712df592253fcb4" featured="false" releasedate="2017-24-01 00:00:00" code="ABC003" detail="Some text" name="Dummy Three" displaytitle="Dummy Three" keywords="" id="3e35wba1d9b32a45" status="active" lastupdated="2016-24-01 04:53:15"/>
<ITEM libraryid="e3712df592253fcb4" featured="false" releasedate="2017-24-01 00:00:00" code="ABC002" detail="Some text" name="Dummy Two" displaytitle="Dummy Two" keywords="" id="cca6f0cab9defe80" status="active" lastupdated="2017-24-01 01:57:37"/>
</ITEMs>
</responseITEMs>
I have not used EmberJs before, but it was suggested to me. I'm not sure it's possible to use with XML, so I currently have a PHP script running on a different local server that's calling a fixed API URL endpoint and converting the response to JSON:
$Json = json_encode(simplexml_load_string($data));
echo $Json;
The JSON I end up with looks like this:
ITEMs: {
ITEM: [
{
#attributes: {
libraryid: "e3712df592253fcb4",
featured: "false",
releasedate: "2017-24-01 00:00:00",
code: "ABC001",
detail: "Some text",
name: "Dummy One",
displaytitle: "Dummy One",
keywords: "",
id: "1fef760bc1d61c8c",
status: "active",
trackcount: "0",
lastupdated: "2016-24-01 04:53:28"
}
},
{
#attributes: {..... etc
I am trying to write an Ember normalizer that will mean that I can run a simple loop through the items (real term is not ITEM) on an Ember template. Currently it is:
import DS from 'ember-data';
export default DS.RESTSerializer.extend({
normalizeResponse(store, primaryModelClass, payload, id, requestType) {
payload = {
ITEM: {
id: payload.ITEMs.ITEM[0]["#attributes"].id,
type: requestType.modelName,
name: payload.ITEMs.ITEM[0]["#attributes"].name
}
};
return this._super(store, primaryModelClass, payload, id, requestType);
}
});
At this point Ember inspector shows that I am getting the ID and name under the Data tab, but I can't get them onto my template, or obviously retrieve more than the first item due to the hardcoded ITEM[0].
Route:
export default Ember.Route.extend({
model() {
return this.store.findAll('ITEM');
}
});
Model:
export default DS.Model.extend({
name: DS.attr('string'),
});
Template:
<strong>{{ model.name }}</strong>
<ul>
{{#each model.ITEM as |one|}}
<li>{{one.name}}</li>
{{/each}}
</ul>
Obviously I am not that far along and do not know Ember well at all. I am open to and would appreciate better solutions to tackling this as well as technical input towards my current code.
If you are using php-script, you can convert XML to correct response on PHP side, why use serializer for this?
Other solution would be creating new adapter and serializer to work with XML-responses without php-convertion.
You may find this link useful: https://bendyworks.com/blog/old-new-soap-ember-js
I am new to AngularJS and I am trying it out with node.JS.
My first try is fairly simple. I use an array to display images with ng-repeat. It is working but for some reason when I load the page I get one error.
Here is my html:
<footer ng-app="footIcon" ng-init="icons =[
{name: 'Node.js', file: 'node_ico.png', title: 'Serveur Web JavaScript'},
{name: 'AngularJS', file: 'angular_ico.png', title: 'Programmation Javascrit Angulaire'},
{name: 'HTML 5', file: 'html5_ico.png', title: 'Hyper Text Markup Language Version 5'},
{name: 'CSS 3', file: 'css3_ico.png', title: 'Cascade Style Sheet Version 3'},
{name: 'JavaScript', file: 'js_ico.png', title: 'JavaScript'},
{name: 'JQuery', file: 'jquery_ico.png', title: 'Write less do more'},
{name: 'Bootstrap', file: 'bootstrap_ico.png', title: 'CSS Template'},
{name: 'Arduino', file: 'arduino_ico.png', title: 'Votre programmation rejoint le monde physique'},
{name: 'Raspberry Pi', file: 'pi_ico.png', title: 'Ordinateur de poche propulsé par Linux'}
]">
<div class="container" >
<div class="row">
<div ng-repeat = "icon in icons" class="col-lg-1 col-md-1 col-sm-3 col-xs-6">
<img src="images/{{icon.file}}" alt="{{icon.name}}" title="{{icon.title}}">
</div>
</div>
</div>
</footer>
The page is displayed correctly but the console return;
GET file:///C:/NODE/www/images/%7B%7Bicon.file%7D%7D net::ERR_FILE_NOT_FOUND
I have try to put my script tag (the one linking to angular) at the top of the of the page (to load it before code happen) But when I did that I was getting this error twice.
my ng-app only contains bare minimum:
var footIcon = angular.module('footIcon', []);
Why am I getting this error?
Use ng-src as opposed to src in img tag.
Reference: https://docs.angularjs.org/api/ng/directive/ngSrc
What is happening is when your page loads, the browser tries to load the img tag with the source that your template has i.e images/{{icon.file}} which your browser can't find hence the error.
I have a bunch of links in the footer of my app (Angular 1.3.15).
html
<section class="footer-projects">
<div class="container">
<div class="row">
<section ng-repeat="area in ::links">
<h4 ng-bind="area.title"></h4>
<ul>
<li ng-repeat="project in ::area.projects">
</li>
</ul>
</section>
</div>
</div>
</section>
ng-repeat loops through this
js constants
'use strict';
require('./footer.module.js')
.constant('FooterLinkConstants', [
{
title: 'Space',
projects: [
{
name: 'Galaxy Zoo',
url: 'http://www.galaxyzoo.org/'
},
{
name: 'Moon Zoo',
url: 'http://www.moonzoo.org/'
},
{
name: 'Solar Storm Watch',
url: 'http://www.solarstormwatch.com/'
},
{
name: 'Planet Hunters',
url: 'http://planethunters.org/'
},
{
name: 'Planet Four',
url: 'http://planetfour.org/'
},
{
name: 'Radio Galaxy Zoo',
url: 'http://radio.galaxyzoo.org/'
},
{
name: 'Stardate M83',
url: 'http://www.projectstardate.org/'
},
{
name: 'Disk Detective',
url: 'http://diskdetective.org/'
}
]
}
]);
and this is my directive
js directive
'use strict';
require('./footer.module.js')
.directive('appFooter', appFooter);
// #ngInject
function appFooter($state, FooterLinkConstants) {
var directive = {
link: appFooterLink,
restrict: 'A',
replace: true,
templateUrl: 'footer/footer.html'
};
return directive;
function appFooterLink(scope) {
scope.links = FooterLinkConstants;
});
}
}
All works fine in development. However when I deploy to a remote server address, that address gets prepended to the values in my list above. For example:
instead of
http://www.galaxyzoo.org/
I get
http://preview.zooniverse.org/folgerdemo/http://galaxyzoo.org/
You can have a look at the live example (just inspect the links in the footer)
So why does that happen?
Other questions, like this, suggest to use absolute urls by including the protocol in the addresses; which I am already doing.
I'm pretty sure I'm missing something obvious, but could do with some fresh pair of eyes.
Right. Unfortunately only I could know the answer - not because it was difficult obviously, but because I didn't provide all the pieces of information in my question.
I built my application as a spin-off of somebody else's. The app uses Gulp as task manager.
It turns out that this line
gulp.src(filename).pipe(replace(/(href=")(?![http|\/\/])/g, '$1' + prefix)),
where prefix value is dependent on the type of AWS S3 bucket is used, was replacing my urls.
Once I commented out that line, things were back to normal.
Thanks to people who commented and apologies for wasting your time ;)
I'm in the process of grokking Ember after the 1.0 release, and thought was going well at it until I tried following this tutorial on integration testing. It's well written and pretty didactic, but I've been stuck debugging the setup test for a few days already :/ Noob pains...
This gist shows the test and the error on qunit. I'm following the setup from the tute, and which I have seen elsewhere.
On IRC somebody pointed out this tute uses R5, not the latest 1.0 release. He didn't know whether ember-testing had changed since then, but this is a possible culprit.
Any ideas on what I could be doing wrong? It's gotta be something stupid, I'm aware :)
(using Ember with Rails 4)
Update
Márcio's fiddle let me play around adding and removing stuff until I replicated the error. Turns out I didn't have any templates setup, and the test didn't like that, though the application loaded with no errors, and the ember inspector saw routes etc.
I got this working following the tutorial:
Javascript:
App = Ember.Application.create();
App.Store = DS.Store.extend({
adapter: DS.FixtureAdapter
});
App.Router.map(function() {
this.route('edit', { path: ':person_id' });
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('person');
}
});
App.Person = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string')
});
App.Person.FIXTURES = [
{id: 1, firstName: 'Kris', lastName: 'Selden'},
{id: 2, firstName: 'Luke', lastName: 'Melia'},
{id: 3, firstName: 'Formerly Alex', lastName: 'Matchneer'}
];
App.rootElement = '#ember-testing';
App.setupForTesting();
App.injectTestHelpers();
function exists(selector) {
return !!find(selector).length;
}
module("Ember.js Library", {
setup: function() {
Ember.run(App, App.advanceReadiness);
},
teardown: function() {
App.reset();
}
});
test("Check HTML is returned", function() {
visit("/").then(function() {
ok(exists("*"), "Found HTML!");
});
});
Templates:
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div id="ember-testing-container"><div id="ember-testing"></div></div>
<script type="text/x-handlebars" data-template-name="application">
<h1>ember-latest jsfiddle</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>Index Content:</h2>
<ul>
{{#each}}
<li>{{#link-to 'edit' this}} {{firstName}} {{lastName}} {{/link-to}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="edit">
<h2>Edit:</h2>
<p id='name'>
{{firstName}}
</p>
</script>
Here is fiddle with this working http://jsfiddle.net/marciojunior/GveWH/
Here is the issue I'm having.
Say you have an app with two models, Project and Post. All posts belong in a specific project. So, the paths to the posts contain the project ID as well (example.com/:project_id/:post_id).
How can I transition from post X on project A to post Y in project B? Simply calling transitionToRoute('post', postA) from post B's route will retain post B's project ID in the url.
Here's a fiddle describing my predicament. As you can see, when using the project links at the top of the page, the correct posts appear in the correct projects. However, click the link after "other post" and you'll see how Ember is happy to display the post in the context of the incorrect project.
How can I transition between these "cousin" routes in Ember?
The JS:
window.App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Store = DS.Store.extend({
adapter: DS.FixtureAdapter
});
App.store = App.Store.create();
App.Router.map(function(match) {
this.resource('projects');
this.resource('project', {path: ':project_id'}, function(){
this.resource('post', {path: ':post_id'});
});
});
App.Project = DS.Model.extend({
title: DS.attr('string'),
posts: DS.hasMany('App.Post')
});
App.Post = DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string'),
project: DS.belongsTo('App.Project')
});
App.Project.FIXTURES = [
{
id: 1,
title: 'project one title',
posts: [1]
},
{
id: 2,
title: 'project two title',
posts: [2]
}
];
App.Post.FIXTURES = [
{
id: 1,
title: 'title',
body: 'body'
},
{
id: 2,
title: 'title two',
body: 'body two'
}
];
App.ApplicationController = Ember.ObjectController.extend({
projects: function() {
return App.Project.find();
}.property()
});
App.PostController = Ember.ObjectController.extend({
otherPost: function(){
id = this.get('id');
if (id == 1) {
return App.Post.find(2);
} else {
return App.Post.find(1);
}
}.property('id')
});
And the templates:
<script type="text/x-handlebars" data-template-name="application">
{{#each project in projects}}
<p>{{#linkTo project project}}{{project.title}}{{/linkTo}}</p>
{{/each}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="project">
<h2>{{title}}</h2>
{{#each post in posts}}
{{#linkTo post post}}{{post.title}}{{/linkTo}}
{{/each}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="post">
<h3>{{title}}</h3>
<p>{{body}}</p>
other post: {{#linkTo post otherPost}}{{otherPost.title}}{{/linkTo}}
</script>
I found 3 issues.
1. Your belongsTo fixture data is missing the id's they belong to.
App.Post.FIXTURES = [
{
id: 1,
title: 'title',
body: 'body',
project:1
},
{
id: 2,
title: 'title two',
body: 'body two',
project:2
}
];
2. When you transition to a resource, if you only send in a single model, it will only change that resource's model, if you want to update multiple models in the path, send in all the models necessary
{{#linkTo 'post' otherPost.project otherPost}}{{otherPost.title}
3. linkTo routes should be in quotes. (in the future it won't work properly without them), see example above
http://jsfiddle.net/3V6cy/1
BTW, thanks for setting up the jsfiddle, it makes me like a million times more likely to answer a question. Good luck working with ember, we love it!