I would like to render an ember.js view using either raphael.js or d3.js. My understanding is that it is possible to do this, but I can't seem to figure out how to get this to work after reading all the docs and googling around. Any suggestions?
A hello world example would be ideal to at least get me started on the right track.
There is a blog post by Johannes Fahrenkrug, using Raphael.js with Sproutcore 2.0 http://blog.sproutcore.com/using-raphael-js-with-sproutcore-2-0/. The code is hosted at https://github.com/jfahrenkrug/sproutcore-raphael.
Since Ember.js kinda evolved from Sproutcore 2.0, it shouldn't be to much work to use the existing code. Iv'e ported the excellent example by Johannes to Ember.js and created a JSFiddle, see http://jsfiddle.net/pangratz666/BHYgQ/. You should definitely check out the project on GitHub.
My ported example is hosted on GitHub and can be seen live at http://pangratz.github.com/ember-raphael.
As for D3, you can take a look at Alex Rothenberg's post Combining D3 and Ember to Build Interactive Maps.
I ported DC.js Crossfilter + D3 Charts over to Ember Components https://github.com/andrewreedy/ember-dc
Related
I am a .net programmer who is about to start a new project and would like to venture out into the world of open source software. After all my research I had settled for Angular.js and GSAP. But after reading how Angular.js 2.0 is going to be radically different from 1.3, I am beginning to lean towards ember.js. I've tried figuring this out myself, but I noticed that there isn't as much material out there for ember.js as there are for Angular.js. So my question is...
Would I be able to easily integrate GSAP into an ember.js project? Do they play well together? Thanks!
Ps. The stacks I am planning on using is ember.js/Angular.js, GSAP, node.js.
There’s nothing preventing you from using typical Javascript libraries in an Ember application. Depending what you’re trying to do with GSAP, you could look at Liquid Fire, which is an Ember-centric animation addon for ember-cli.
Where can I find a tutorial + demo + source to the latest ember-1.0.0-rc.1 + ember.data-11 version? Starter-Level.
I tried so many tutorials, but all I found are out dated :(
Thanks so much in advance.
https://github.com/dgeb/ember_data_example is worth taking a look at. It is very up to date and intends to provide a complete end-to-end example of using ember and ember-data backed by a simple Rails 3.2 app
The ember docs and dev source have been the only definitive source of information for me, but the official examples are still being updated to work properly. Ember data is even further out of reach - heed their warning on the faq and don't use it for production.
As mentioned, there is a very well done peepcode video but it was released just weeks before the massive RC1 changes and so much it will only work if you use the pre-RC1 library. I can't imagine the peepcode producers are very pleased about having their training become almost completely obsolete so quickly.
At least RC1 should be the last major change that breaks everything, so try to move forward and not back.
My favourite is definitely: http://trek.github.com/ for all of the detail it goes into. I suggest you sit down and read that, with a nice cup of coffee on the side to keep you going.
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'm making my first project with ember.js, and so far haven't been able to find any example projects that use the new routing system. All the examples from the ember docs use the old routing.
Also, I'd love to see an example of a project that uses Ember Data if anyone knows of one.
Thanks!
You can find an example project using ember 1.0.0 pre.4 here:
https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
There are plans to provide an ember-data version as well. Check here for details:
https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences/pull/9
Another great example can be found here:
https://github.com/dgeb/ember_data_example
Although not free Peepcode just released their "Fire Up Ember.js" which covers the most recent updates to Ember and is probably your best bet for a good introduction.
https://peepcode.com/products/emberjs
I have an ember, ember-data with a rails backend app that I have been working on https://github.com/kiwiupover/cookier updated to use ember 1.0.0 pre.4.
Have a look and let me know what you think.
Cheers
Also, you can check this series of tutorials: http://reefpoints.dockyard.com/ember/2013/01/07/building-an-ember-app-with-rails-api-part-1.html. Among other things, it covers new routing system and basics of ember-data.
Additionally, you can take a look at this video introduction to new router from Yehuda Katz: https://www.youtube.com/watch?v=4Ed_o3_59ME
I just started using Ember.js recently and I love the functionality. I'm wondering which UI toolkit you might be using to tie into design side of your applications.
For Bootstrap integration with Ember, take a look at this project I started two days ago:
https://github.com/ember-addons/bootstrap-for-ember
It really fun and easy to use and lightly integrate bootstrap and ember components altogether.
Personaly, I am using Twitter's bootstrap library, which is quite low level, but pretty clean.
Twitter Bootstrap is my preffered choice when it comes to UI especially when prototyping something quickly, recently i have started to use EmberJS and have looked into this as well. So far i have found https://github.com/emberjs-addons/ember-bootstrap
I will update this as my search continues.
Hope this helps with your project!
Twitter bootstrap is a great UI frameworks no doubts but I feel it is too mainstream these days. Hence my personal preference is Metro UI CSS, it's sleek and great for developing mobile applications using HTML5
I am just starting with emberjs also. Actually I use JQMobile. But I have some issues with it. As I want have a Mobile look and feel, I will try more.
But even if have not use bootstrap with EmberJs I think it will be easier to use as it's only css.
With a UI toolkit that use JavaScript and is owns attributs(exemple : data-role="List"... with JQuery Mobile) you can have rendering issues. I think this is because that Metamorphose/Handlebars and JQuery Mobile both modify the DOM on the fly and it can be tricky to get all work right.
But I am not a EmberJs or JQ Mobile Guru :-)
Sorry for my english, it isn't my mother tongue.
Just one Question .. what is a OSS framework and do you have the links on GitUb
This maybe old but I've used this addon on over 5 projects so far with great success. The project is well maintained and flexible. The maintainer is active and takes pull requests efficiently.
http://kaliber5.github.io/ember-bootstrap/
Disclaimer: I am not officiated with this project beyond that of an end consumer.
You could have a look at Ember Paper if you like Google Material:
http://miguelcobain.github.io/ember-paper/