and thank you ahead of time. I have recently changed the emberjs dependency in my application to 1.0.0pre, and am having trouble with views rendering. I tried downloading from emberjs/examples on github seeing as how the latest commit was for switching to 1.0.0pre.
When I tried opening the applications, I noticed handlebars wasn't referenced, but after fixing that all the applications have the same problem I had: Rendering Views yielded empty containers and the console was silent (on my application even the console.trace() int he development build of ember didn't help while the rest of the console was silent).
I was wondering if anyone knows any working examples I could look at for ArrayControllers and/or CollectionViews on ember 1.0 pre so that I could use that as reference.
I don't have enough reputation to vote up on answers, but thank you for taking the time to help.
See Handlebars action helper works in EmberJS 0.9.8.1, but not Ember 1.0 Pre
Make sure you have the absolute latest handlebars from https://github.com/wycats/handlebars.js/downloads
Related
I am trying to move an application from using tornado templates (to be more accurate, it's jinja with an adapter) to ember.js.
It is my understanding that ember.js has very strong opinions on how to compose the final rendered product. In practice, it seems that the whole application must be generated from ember templates on the client side. The server side just provides data in REST format.
Is it possible to have ember work and take control only on some parts of a page that is mostly rendered by tornado templates (a la jquery plugins), or do I have to completely switch to ember?
Welcome, glad you're looking hard at Ember! You're right, Ember has definite opinions on how things should work :-) Despite that, it is indeed doable to migrate over in chunks.
You have a few options on how to handle this.
1. Build out from a single div on a page
You can see this in action on the builds page on the main Ember site (which is a small Ember app). Source for it is available here: https://github.com/ember-learn/builds/
Of interest is the fact that you can define the rootElement that you want Ember to render in to (see https://github.com/ember-learn/builds/blob/master/app/app.js although we should actually move that line to the config file). Once you have Ember on the page it is then possible to have it both interact with external Javascript or to have external Javascript call in as needed.
2. Sprinkle Ember components on to a page
If you need Ember to control multiple parts of the same page, you may want to look at https://github.com/mitchlloyd/ember-islands That addon is designed to work with server-rendered pages, so may not fit your setup. But it's another example of how to refactor in.
3. Use the new GlimmerJS (alpha)
You could also start refactoring into Ember using the newly announced GlimmerJS. The goal for this library is to allow folks to sprinkle in Ember and then as they need page routing and other aspects of Ember, allow them to switch over. So it may fit what you are after.
Note however that the GlimmerJS layer (on top of the Glimmer vm) is still quite new. What is there works well, but much of the Ember polish is still being added. So shipping to production could take some work ...
I'm just getting started with EmberJS and saw the "routing" example on the emberjs.com page. It takes the form of a mail client.
I've downloaded all the files (app.js, application.hbs, etc) but can't figure out how to get it to "work".
There seems to be missing an HTML as the entry point?
OR, if nothing is missing, how do I view this app within a browser?
Unfortunately, although this example makes its point (showing how you don't need a lot of code to do something that is traditionally complicated), you can't use the files directly without some tooling to compile the templates, for instance.
It is recommended for any new Ember project to use Ember CLI to do this work for you. You should check out the 'Getting Started'-section of their website, and then read through the section on using modules and the resolver, which will explain the ways in which the example you are looking at would be different.
The official Ember Guides are very good for getting started, and I'd recommend you check that out (make sure you read that modules-part if you're using ember-cli (which you should) before you go through the guides). Also, please join us on IRC on #emberjs if you have any questions that would need some more back and forth.
Welcome!
I've noticed that emberjs states a dependency to the 1.9.x family of jQuery in it's composer.json and bower.json files. I'd be interested in pushing upward and onward to later versions of jQuery but wasn't sure if that was just asking for trouble.
A few searches I did before asking this question indicated that ember's use of jQuery is only in the View and I did hear a few people state that they were using ember with jQuery 2.x ... all of this makes me encouraged to think it would work but as I'm such a newbie I really can't afford to run into problems only to be plagued with the thought ... maybe this is because I'm using the wrong version of jQuery. ;^)
I've noticed that emberjs states a dependency to the 1.9.x family of jQuery in it's composer.json and bower.json files. I'd be interested in pushing upward and onward to later versions of jQuery but wasn't sure if that was just asking for trouble.
I guess you do ask for some trouble :)
A few searches I did before asking this question indicated that ember's use of jQuery is only in the View and I did hear a few people state that they were using ember with jQuery 2.x ... all of this makes me encouraged to think it would work but as I'm such a newbie I really can't afford to run into problems only to be plagued with the thought ... maybe this is because I'm using the wrong version of jQuery. ;^)
I can't lamentably remember the title of the question asked here on SO in which a dev was using jQuery 2.x and after I reproduced his use case in a jsbin using version 1.9.x fixed the problem.
So, IMHO if you don't need features only available in jQuery 2.x you should stick to the recommend version ember is using.
Hope it helps.
P.D. I'll try to find the thread I was talking about and update my answer...
I hate to ask such a newbie and vague question, but I imagine there must be others out there whose brains are also about to explode. I see related questions, but none that directly addresses my confusion.
I've just been introduced to Ember.js and I'm trying to learn the basics of the Router, but I can't find two sources that agree on how this is done. I suspect that I'm jumping in during an unstable transition. I'm using the latest 1.0.0-Pre.4 release.
The best I can figure, Router is the new mechanism, and possibly replaces StateManager - yes? Yet the classes listed under 1.0.0-Pre.4 API on the web site don't even list a Router object, nor does the guide make mention of it... yet, I get no complaints from javascript when I use sample code that extends Em.Router.
Ok cool, however it then barfs on the Router member "transitionTo" which is present in many of the demo projects, but is unrecognized in the current release.
So, I guess what I'm asking is not so much a direct question, as I am looking for a grounding point in a sea of contradictory information.
If starting out with Ember.js as it is RIGHT NOW (1.0.0-pre.4), with no history to contend with, what routing mechanism should I be looking at, and is there any tutorial or simple sample app that demonstrates and runs against this version of the library? Can you confirm my suspicion that the documentation is out-of-date in regard to routing?
Ember.js is a lot to learn, and if I ever hope to figure it out, I need to know what to ignore and what to embrace.
Thank you.
The best I can figure, Router is the new mechanism, and possibly replaces StateManager - yes?
Yes, Router is the new mechanism. It does not replace StateManager per-se. Early version of the Ember Router were based on StateManager. The new one (1.0.0-pre.4) is not, but StateManager is still an important part of the ember library. Many of ember's core components (models, views) rely are built on StateManager.
Yet the classes listed under 1.0.0-Pre.4 API on the web site don't even list a Router object, nor does the guide make mention of it... yet, I get no complaints from javascript when I use sample code that extends Em.Router.
The Router does not have API docs yet. I imagine these are in the works. When in doubt about a fast-moving open source project I always have a look at the tests. Ember has a really solid test suite, and in the case of routing you can learn a lot by reading through the integration tests here: routing/basic_test.js
Ok cool, however it then barfs on the Router member "transitionTo" which is present in many of the demo projects, but is unrecognized in the current release.
Sounds like those demo projects are out of date.
Can you confirm my suspicion that the documentation is out-of-date in regard to routing?
Re: the official docs I think both the API and Guides can be considered current, but be aware that not every ember feature has API docs so far. For sure there are many out-of-date sources floating around. Trek has been working to compile a list of out-of-date sources so that we can reach out to authors for a refresh. Here on Stack Overflow, anything related to the old router should now be tagged https://stackoverflow.com/questions/tagged/ember-old-router.
If starting out with Ember.js as it is RIGHT NOW (1.0.0-pre.4), with no history to contend with, what routing mechanism should I be looking at, and is there any tutorial or simple sample app that demonstrates and runs against this version of the library?
The ember team has been putting a lot of effort over the past few months into the Ember.js Guides - AFAIK they are all up to date WRT (1.0.0-pre.4) and are becoming more solid every day. They include a lot of detail about the new Router - see Ember.js - Routing for the most up-to-date information.
As for tutorials, there are several new ones that are worth a look. Check out this SO post for a few recommendations: Could someone point me to an ember.js project that uses the latest routing system? Bonus points if it uses ember-data as well
tip: build your own version of ember from master branch - they fixed few bugs :)
I've been trying to rework an as yet unfinished ember app of mine to use require.js
It's mainly for interest value and I started looking into it when I wanted to use require-text for my handlebar templates, for convenience. So I havent found myself looking into it for any sort of AMD related performance win or anything like that. But now I've started setting my module out by defining modules I am finding it easier to read and would like to stick with it.
There is a question on stack overflow where the asked has come back and posted their findings Ember.js and RequireJS but none of the other examples, like the example on todo MVC can be found on references on how to optimally structure and reference the files in more complex apps.
So anyway, my question is: What are the rules to follow to make correct use of require JS. What does it achieve (apart from access to AMD)? It's hard for me to get my head around it with a test project that doesnt really require it, but I'd like to learn the correct ember related principles so I can use it in future.
I've seen from example code that the idea may be to remove all references to the global namespaces from the modules. Is that correct? There arent enough examples around for me to spot a pattern.
At the moment a file at the top level of my structure might have some stuff like this in
<script>
define(['jquery',
'app/controllers/mailshotlist',
'app/controllers/sites',
'ember'],
function($, MailShotList, Sites) {
var App = Em.Application.create({
Views: Em.Namespace.create(),
Models: Em.Namespace.create(),
Controllers: Em.Namespace.create(),
init: function() {
this._super();
this.Controllers.set('Sites',Sites.create());
this.Controllers.set('MailShotList',MailShotList.create({
sitesControllerBinding: 'App.Controllers.Sites'
}));
}
});
return window.App = App;
});
</script>
So, trying to stitch together explicit app.x references in initialisation of the app. Since I guess if your modules are all referencing each other explicitly in the code then its not properly modular. I'm not at the stage where i want to reuse modules at the moment, but im assuming that is one of the goals
I'd like for this not to turn into a debate about whether AMD is worth it or not, my question is specifically about what rules need to be followed to get the most out of using ember with require js. Although if there are good specific reasons for not using ember with require then that would be interesting.
I think I've rambled a bit and am running the risk of getting this locked as 'non-productive' but If you can understand my question and what im trying to understand (or if im barking up the wrong tree entirely) then please post a reply
Haven't made up my own opinion yet but this is what Ember.js developer Tom Dale has to say on the matter.
http://tomdale.net/2012/01/amd-is-not-the-answer/
If you still want to use EmberJS and RequireJS,
I've just uploaded to github a starter-kit for EmberJS+RequireJS, You could check it https://github.com/fernandogmar/Emberjs-RequireJS
It's my particular suggestion for big enough projects...
Any good suggestions will be highly appreciated. Have Fun!
There is nothing that makes emberjs / requirejs relationship special , they are orthogonal. Does Ember solves dependencies between script files ? no , Is requirejs a MVC framework ? no , so what is the problem ? The use of requirejs with emberjs is no different from the use of requirejs with any library that doesnt provide AMD. So nothing special here. You want AMD ? use requirejs to define your own modules and resolve dependancies between them , that's the point.
The only question is , do you have a problem to solve or not ?
As #mpm wrote, there is nothing special about Ember.js + RequireJS or other no-AMD framework + RequireJS.
Good starting point is RequireJS documentation and Ember.js + RequireJS TodoMVC project example:
http://requirejs.org/docs/start.html
http://addyosmani.github.com/todomvc/