Can Ember be use to add js sexiness to a page without routing

1

I’ve been using Angular to add some UI friendliness to pages in Rails apps. Am switching to Ember and was wondering if it can be used to add UI friendliness to parts of pages without having it run the entire app.

i.e. Rails has the routing, controller and model logic. Initially I use ember just to make the UI more user friendly on certain parts of pages.

Or do I have to commit to have Ember run the entire front end app via route/controller/models/views.

Am watching some videos on it, my use case is to add UI friendliness to a Rails website vs making a single page app. Thanks for any pointers.

2

Well it’s hard to say without hearing some more examples of what kind of sexiness you want to add, and I certainly don’t want to kill any enthusiasm you have about learning Ember, but to me it sounds like you don’t need a full fledged JS library. Could you not get along with just plain ol’ javascript, jQuery UI and so on?

Routing and urls are a big part of what ember is buying you.

Also, I’m curious what other, more experienced ember devs have to say because I could very well be forgetting some easy way to make Ember work how you want.

3

As an example I’d like to have Ember provide some of the view in a page and post/get data as json to the server. I’d like to have a search filter similar to Angularjs in real time for the list in the page.

I’d like to have toggle for form elements if they’re needed to make better use of the screen real estate, so more doable in the same screen without having to scroll down.

Also sortables and drag and drop in certain instances, sliders that change the view - i.e. age range on a dating site. I know I can do all this in jquery, I was just wondering if there’s any repo yet with Ember equivalents, I’d imagine there will be over time be a site like ruby gems for Ember.

4

You can definitely do something like this, but, like tristanpedergr said above, it might not be worth the extra overhead.

To start, you can tell Ember what HTML element to live in by setting rootElement and tell it to not muck around with the URLs by setting the router to none:

var App = Ember.Application.create({
  rootElement: "#my-div"
})

App.Router.reopen({
  location: 'none'
})

With that all set up, the app will use IndexController/IndexView, etc. to render your ember stuff, so you can fill that in with what you want to build.

However, for the sections of the screen that you’re rendering with Ember, you kind of have to go all in—as far as I know, there’s no good way to “decorate” existing HTML with ember bindings, etc.

5

I definitely disagree with the above. You don’t have to use the router to take advantage of ember. In fact, up until a year ago, router-less apps were the status quo.

True that you do lose a lot of the niceties that the router brings, but controllers can fill the gap quite easily. And it will help you understand why the router is structured the way it is.

Adding in a bunch of router-less apps to existing multipage sites is a really good way to move towards a full ember site. I personally was only using ember on new projects, and advocated backbone for existing apps, however I am now using ember even for tiny apps. The view and controller layers of ember are very comprehensive.

Here’s a quick example I made of a router-less ember app that renders views outside of the main app template: http://emberjs.jsbin.com/cocif/4/edit

Let me know if there’s any more specific cases that you need covered and I can add things in.

3 Likes
6

I like this. Bookmarking that jsbin for when I come across this situation.

7

I’m not disagreeing with this poster because I haven’t tried to use Ember for this reason. To me I always try to make sure I am using the right tool for the job. A full-fledged Framework like Ember or Angular does not seem to be the right tool for solving the problem of putting some JavaScript on a single page.

8

I think it’s worth mentioning that if you use the hash fragment for routing there’s nothing to stop you using ember’s routing alongside rails’.

Your url would like something like my 腾讯应用宝官网-全网最新最热应用及游戏下载

1 Like
9

You should check this talk by @crofty if you haven’t: Integrating Ember.js into Existing Sites.

1 Like