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
Related
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 am trying to implement an ACE editor in a page which uses turbolinks. However, the editor only works when I directly call that page, or when I reload the page. Navigating to it won't trigger every necessary step to make the editor work.
Current integration:
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/mode-html.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/mode-css.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function initialize_editor() {
var editor = ace.edit("html-editor");
editor.setTheme("ace/theme/clouds");
editor.getSession().setMode("ace/mode/html");
editor.setValue($('#template_html').val());
$('form').on('submit', function(event) {
$('#template_html').val(editor.getValue());
});
}
$(document).ready(initialize_editor);
$(document).on('page:load', initialize_editor);
</script>
This throws an Uncaught TypeError: Cannot read property 'ace/ace' of undefined. After leaving the page, the js seems to be stuck on the page, and on every navigation load, I get an Uncaught ReferenceError: ace is not defined.
What's the proper way to include ACE editor (or other external libraries) here? Loading them via sprockets won't work, and when copying them into vendor/javascripts/ and requiring them in the sprockets manifest, I had serious trouble getting it to run properly.
Any enlightenment about turbolinks and a proper way?
I could solve it by fetching the required js files and putting them into the vendor/javascript path. The initial problem with special chars for spaces and tabs (also reported here by others) could be solved by storing the files explicitly as utf8 with BOM.
If this seems not-so-helpful (Noting the 'too localized' close votes), then please tell me why. I think Django and JQuery UI make a pretty good team so it's worth working out any gotchas about using them. The answer to this question is not something I've found documented or in another question and is relevant to use of other widgets in other places.
And on to the question...
I have a django project in development mode. Inside its static directory I have the following file structure:
directory: js
jquery-1.9.1.js
jquery-ui-1.10.1.custom.js
other_stuff.js
directory: css
directory: ui-lightness
directory: images
jquery-ui-1.10.1.custom.css
jquery-ui-1.10.1.custom.min.css
I'm trying to get the datepicker to work on one of my forms:
In my html head I have:
<link type="text/css" rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.10.1.custom.css"/>
<script src="/static/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/static/js/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#id_date_of_birth").datepicker();
});
</script>
And the input I am trying to change looks like:
<input type="text" size="10" id="id_date_of_birth" class="vDateField" value="1987-01-19" name="date_of_birth"/>
Now I know this question has been asked like a billion times before but none of the listed solutions I have read so far seem to work...Can anybody hazard a guess as to why I am getting the error$(...).datepicker is not a function ?
Stuff I've considered:
Everything seems to be included in the correct order. Other solutions mention including jquery ui's ...core.js but I think everything is included in jquery-ui-1.10.1.custom.js because otherwise the jquery ui download page is very misleading (I chose to download every component and there is no effect)
No other errors came up except the one I mentioned. All scripts loaded correctly
Nothing is included more than once
I'm waiting until the document is ready before calling anything at all so my problem is not due to bad timing
If the directory structure you listed is accurate, your jquery files do not end with ".js", while your references to those files do have ".js" in the page header. Add the ".js" extension to your jquery files and it should work.
you should also close your input element:
<input type="text" size="10" id="id_date_of_birth" class="vDateField" value="1987-01-19" name="date_of_birth" **/**>
For some reason the link wanted a separate closing tag...
<link type="text/css" rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.10.1.custom.css"><link/>
This happened to me several times.
What i did was to copy the whole code (script) and placed it in the parent view.
If you're trying to place the script in a partial it may not work, try to put it in a higher level until you get the job done.
One example in django-oscar i had to place the script in the basket.html template to make it work in here:
{% include 'basket/partials/basket_content.html' %}
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!
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/