I am trying to familiarize myself with Emberjs, and I am going through this excellent tutorial. There is a link to a fiddle on the page that contains a working example of the tutorial, which is great.
The problem I'm having is when I change the managed resources to the newest versions of Emberjs and Handlebarsjs, the fiddle no longer works.
When I put the code into a local version on my machine, the browser gives me the following warning: Uncaught Error: - Unable to find template "application".
I would assume that the problem lies in how the template is being called:
//In app.js
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
//In index.html
<script type="text/x-handlebars" data-template-name="application">
<h1>Ember Committers</h1>
{{outlet}}
</script>
I understand that the Emberjs code is in flux, but when I went trying to find an answer as to why this code did work with a previous version and what to change to make it work, I came up empty.
Help!
Related
I'm building my first Ember.js application and everything was going well until I tried to move my templates to seperate files and precompile them.
I've tried various techniques and various versions of Ember and Handlebars.
Compiled templates that contain only HTML are working fine but as soon as I try using helpers in my templates I get the following kind of error:
Error: Missing helper: 'link-to'
I've isolated the error down to a simple example. Here's the simple template:
<div>
{{#link-to "users"}} users link {{/link-to}}
</div>
I have the following script references:
<script src="../Scripts/jquery-2.1.3.min.js"></script>
<script src="../Scripts/handlebars.js"></script>
<script src="../Scripts/compiledTemplates.js"></script>
<script src="../Scripts/ember-1.10.0.min.js"></script>
<script src="../Scripts/ember-template-compiler.js"></script>
<script src="../Scripts/ember-data.min.js"></script>
Any help will be much appreciated. I cannot find any other references to this problem and it's driving me nuts.
If you're using 1.10 you don't need Handlebars.
Try removing this line:
<script src="../Scripts/handlebars.js"></script>
This blog post explains more
Up until recently I was including the file...
https://raw.githubusercontent.com/rwjblue/ember-qunit-builds/master/dist/globals/main.js
...in a 'TestRunner' page which I would open to run all of my Ember unit tests. All was great.
A few days ago, that file disappeared from github, so I started searching for the new way get my unit tests (e.g. moduleForComponent tests) running.
I first tried to simply include the ember-qunit.js file from the ember-qunit-builds repo, but errors like could not find module 'ember' came back.
Am I correct in saying that ember-qunit somehow depends on ember-test-helpers? I'm a bit lost as to which references I should be including before my test code...I have a feeling that I'm missing something related to ES6-style modules (export/import etc) with which I have little experience.
Could somebody perhaps point me in the right direction here? What should I be including on my 'TestRunner.html' page to get the 'moduleForComponent'-style tests happening again?
Note: I'm in a .NET environment where I understand that the frequently-mentioned tools for 'installing' this stuff (like Bower/npm) are not really available (are these a necessity for getting this to work?).
I'm not really sure where your problem is, but I can paste you relevant parts of my index.html (I'm using Ember App Kit here):
<!-- #if tests=true -->
<script src="/vendor/ember-shim.js"></script>
<link rel="stylesheet" href="/vendor/qunit/qunit/qunit.css">
<script src="/vendor/qunit/qunit/qunit.js"></script>
<script src="/vendor/qunit-shim.js"></script>
<script src="/vendor/ember-qunit/dist/named-amd/main.js"></script>
<div id="qunit"></div>
<!-- #endif -->
and
<!-- #if tests=true -->
<div id="qunit-fixture"></div>
<script src="/tests/tests.js"></script>
<script src="/tests/test-helper.js"></script>
<script src="/tests/test-loader.js"></script>
<script src="/testem.js"></script>
<!-- #endif -->
If you're looking particularly for the dist/globals/main.js file, then you can always go to github and select an older tag (not master), then go to the file's raw version. Here's the link to the 0.1.8 version:
https://raw.githubusercontent.com/rwjblue/ember-qunit/v0.1.8/dist/globals/main.js
If you want to stay up-to-date, use this repo:
https://github.com/rwjblue/ember-qunit-builds
Does this provide any help?
I'm trying to take the simple TodoMVC demo application from the emberjs.com website (http://emberjs.com/guides/getting-started/) and add some functionality to it, in order to learn more about how Ember works. I've run into a variety of "gotchas" so far that I've managed to get past, but now I'm completely stuck.
The primary feature I'm trying to add to the application now is having multiple lists, each with their own set of items. The request is being handled by the correct Controller and action, but a new List record won't get created. The specific error I am getting is "TypeError: type._create is not a function".
Can anyone tell me what that error means, and/or what I'm doing wrong here?
Here's the code that I'm working with at the moment:
Ember : 1.4.0
Handlebars : 1.3.0
jQuery : 1.11.0
Todos.ListsController = Ember.ArrayController.extend({
actions: {
createList: function() {
var title = this.get('newList');
if(!title.trim()) { return; }
var list = this.store.createRecord('list', { title: title });
this.set('newList', '');
list.save();
}
}
});
Todos.List = DS.Model.extend({
title: DS.attr('string')
});
<header class="header">
<h1>Lists</h1>
{{input type="text" id="new-list" placeholder="Add a List" value=newList action="createList"}}
</header>
<section class="main">
<ul id="todo-lists">
{{#each list in controller}}
<li>
<label>{{list.title}}</label>
<button class="destroy"></button>
</li>
{{/each}}
</ul>
</section>
I ran into a similar issue trying to follow the guide on emberjs.com. I was building the ember app on top of a rails 4 app using the ember-rails gem. It was eventually resolved when I updated to the latest beta version of ember-data.
You didn't list your ember-data version number but that may be the culprit for your errors as the syntax of createRecord that you used looks correct.
When trying to troubleshoot my problem I came across this issue posted in the github repository
In the issue it outlines a different problem that I also experienced when trying to follow the guide, at the bottom of the comments it is mentioned that the "latest (v1.0.0-beta.4 at the moment)" version of ember-data should be used. I inspected the ember-data.js file in my browser inspector and at the top I noticed
// Version: v0.14
// Last commit: d9cd270 (2013-08-31 17:12:14 -0700)
Since I am rails and using the rails-ember gem, I was able to update it through:
$ rails generate ember:install --channel=beta
After running that command I restarted the webserver and inspected the ember-data.js file again and saw
/*!
* #overview Ember Data
* #copyright Copyright 2011-2014 Tilde Inc. and contributors.
* Portions Copyright 2011 LivingSocial Inc.
* #license Licensed under MIT license (see license.js)
* #version 1.0.0-beta.7.f87cba88
*/
The issues I was experiencing literally disappeared without any alteration to the code.
That error you are experiencing comes from ember-data as that is the part of the library that handles the store functions. That part of ember.js is under heavy development at the moment so I would suggest making sure you are using the latest beta version. if you are not using rails for a backend, you can download the .js file from emberjs.com.
I hope this helps, I've been experiencing a lot of frustrating errors trying to get ember to work on rails over the past week, and I think this issue was the cause of most of my problems.
So I'm building an Ember.js application. I've got more than two routers now, so it's becoming a lot harder to justify putting all these templates in index.html as <script> handlebars.
I can't seem to figure out how to have handlebar templates outside of the html! The other thing is that I'd like to avoid more dependencies if possible. So no pipeline, grunt libraries, or similar.
So to clarify:
I already stuff templates in index.html via <script> tags, I don't like it.
I don't want to jump back 20 years and put HTML in strings inside my javascript.
AJAXing static views seems ridiculous.
Without adding anything to the stack I don't see how you could do it other then putting them in index.html or in code one way or the other.
With adding stuff to your stack you should probably read this: answer by Yehuda Katz himself.
You could compile your templates in code like so:
App.View = Em.View.create({
template: Em.Handlebars.compile('{{outlet}}');
});
or if you are extending the view:
App.View = Em.View.extend({
defaultTemplate: Em.Handlebars.compile('{{outlet}}');
});
or you could register them like so
App.register('template', 'ViewName', Ember.Handlebars.compile(template));
The best way I've found so far is to use a command line tool like Grunt. You set the paths where your templates are (so you can organize your handlebars files nicely), and grunt will automatically compile all the views into a single, minified JS file that you can include, whenever you create or modify a template.
Because your templates are already compiled you can ship your application with a much smaller version of handlebars.
You can see an example of a configured Grunt file for that here : https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
I've just written my app.js file and everything is nicely working but the whole file is currently 450 lines long and will be getting bigger.
Is there any best practice about splitting out state manager code or view code into different files (like states.js or views.js) so that everything is a little bit cleaner?
Also on that note... is there a preferred way to split out handlebars templates out into different files? I've currently just got them all defined in one html file which is starting to get a tiny bit unwieldy too.
I was facing the exactly same question two weeks ago, and I didn't wanted to try AMD with requireJS, which seemed a bit complicated for what I wanted to do (and seemed to have advantages but also disadvantages..)
The simple solution which convinced me is the following :
I have 3 folders in my js folder : "models", "controllers", and "views" which contains my js "classes", and I have an "index.html" that import all the js files (I used HTML5 boilerplate to get a convenient index.html).
To be clear, in my index.html, I have at the end of the file something like :
<script src="js/app.js"></script>
<script src="js/models/note.js"></script>
<script src="js/controllers/notesController.js"></script>
<script src="js/controllers/selectedNoteController.js"></script>
<script src="js/views/menuView.js"></script>
<script src="js/views/noteResumeView.js"></script>
<script src="js/views/noteView.js"></script>
<script src="js/views/createNoteView.js"></script>
<script src="js/views/listeNotesView.js"></script>
Hope this help, (and that I didn't misunderstood your question)
You can use RequireJS to load you ember app (including handlebars templates) from different files.
This answer describes how and also links to a sample app showing how to set things up. I have just tried this approach to one of our websites and it works nicely.
I use ember-skeleton for my projects.
To get started simply do the following:
git clone https://github.com/interline/ember-skeleton.git my-app
cd my-app
bundle install
bundle exec rackup
And then go to http://localhost:9292
Also take a look at the wiki for further build tools and templates.
The standard way to do this is now to use ember-cli. Find more information at http://www.ember-cli.com/