Ember.js - A JavaScript framework for creating ambitious web applications Ember.js - A framework for creating ambitious web applications.

Violating Content Security Policy directive after ember-cli 0.0.47 upgrade

I upgraded my ember-cli app to 0.0.47 and am now getting a bunch of errors in my browser console related to the content security policy. How do I fix this issue?

Refused to load the script '' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
Refused to load the script '' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".
Refused to load the script '' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".

Here are the lines in my app/index.html file:

<script type="text/javascript" src="//"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src=""></script>
<script type="text/javascript" src=""></script>

Source: (StackOverflow)

Caching remote data in Local Storage with EmberData

I have a question about loading and caching remote objects with Ember. I'm developing an Ember app that uses server-side storage through a REST API. Some of the fetched data is rarely changing, so fetching it from the server each time the application loads is unnecessary. But this is also a question for apps that need to work offline and still save its data to a server.

Ember Data has a built-in storage adapter for persisting models through a REST API, and there is an adapter for Local Storage as well (as pointed out by Ken below). The problem (if it is a problem) is that a model only has one storage adapter, and there doesn't seem to be any concept of caching fetched models other than keeping them in memory.

I found similar requests in this Ember wishlist and in the comments to this talk by Tom Dale, but I haven't found any indication that this would be an existing feature in Ember.

I have two questions (the first one being the important one):

  1. What is the best way – today – to implement cached models in Local Storage and syncing them with remote data as needed?
  2. Is this a feature that is planned be included in Ember, or at least something that the maintainers feel should be added eventually?

When it comes to 1), I can think of a couple of strategies:

a) Extend an existing adapter and add a custom remote sync mechanism:

App.Store.registerAdapter('App.Post', DS.LSAdapter.extend({
  // do stuff when stuff happens

b) Maintain separate model classes – one set for the remote objects, and one set for local objects – and sync between them as needed. With the standard Todo case:

RemoteTodo –*sync*– Todo

I'm kinda hoping this is a real noob question and that there is a good established pattern for this.

Updated: Found this similar question. It has a good answer, but it's kind of theoretical. I think what I would need is some hands-on tips or pointers to example implementations.

Source: (StackOverflow)

Don't the data attribute options used in Bootstrap, Angular.js, and Ember.js conflict with Unobtrusive Javascript principles? [closed]

I've always been told it's good practice (ala 'unobtrusive javascript') separate JavaScript from HTML markup. However, I've been seeing the opposite trend with a number of new and popular frameworks such as Bootstrap, Angular.js, and Ember.js. Can someone tell me why this isn't considered bad practice?

Source: (StackOverflow)

Ember.js multiple, named outlet usage

I have an application, which will have a view layer organized in three parts:

  1. Sidebar
  2. Toolbar-left
  3. Toolbar-right

I have spent may last few hours with trying to find something helpful with google, but I had no luck. I would need a short and complete application example on how to do this using Router and connectOutlet, with named outlets.

Thx ahead.

Source: (StackOverflow)

How should errors be handled when using the Ember.js Data RESTAdapter?


In short, when there is an error, I want to display error messages in the view, and then the user can 1) cancel, which will rollback the transaction 2) correct the input errors and successfully commit the transaction, passing the validations on the server.

Below is a code snippet from the source. It doesn't include an error callback.

updateRecord: function(store, type, record) {
  var id = get(record, 'id');
  var root = this.rootForType(type);

  var data = {};
  data[root] = this.toJSON(record);

  this.ajax(this.buildURL(root, id), "PUT", {
    data: data,
    context: this,
    success: function(json) {
      this.didUpdateRecord(store, type, record, json);

Overall, what is the flow of receiving an error from the server and updating the view? It seems that an error callback should put the model in an isError state, and then the view can display the appropriate messages. Also, the transaction should stay dirty. That way, the transaction can use rollback.

It seems that using store.recordWasInvalid is going in the right direction, though.

Source: (StackOverflow)

Ember authentication best practices?

Does anyone have experience creating an authentication mechanism with the new router in pre4?

Here are some of my thoughts so far:

  • In order to completely separate the view (Ember app) from the server (Rails app) I want to use token authentication. I will likely use Devise on the Rails server.
  • I need something like a before_filter equivalent in the Ember app where I can check if there is a current user and if that user has an authentication token set.
  • The Rails server will return the current auth token on every call. If it returns a null auth token the Ember app should detect this and transition to the unauthenticated state, redirecting to the login view.

I suspect I should be using an Ember state machine for this but I'm not sure how to proceed. Anyone tackled this problem yet?

Source: (StackOverflow)

Differences between Sproutcore and Ember

I had selected sproutcore as a framework right before Ember forked from sproutcore. I am left uncertain of which way to go and a bit frustrated in the apparent dilution of efforts caused by the fragmentation - as rarely does that lead to better things. The efforts of Sproutcore 2.0 (now Ember) seemed to be going in the right direction of modularization and reuse of other javasript components (jQuery), however it is really unclear from an outside view why the two efforts had to split... couldn't we have modular code, and a widget library module too?

The main questions are:

  1. What are the effective differences between the two efforts?
  2. What is history of the split?
  3. What is sproutcore future, where is it going now?
  4. Is Ember going develop to be a complete replacement for sproutcore?

Source: (StackOverflow)

emberjs - how to mark active menu item using router infrastructure

I'm trying to create navigation tabs (taken from Twitter Bootstrap):

<ul class="nav nav-tabs">
    <li class="active"><a rel='nofollow' href="#">Home</a></li>
    <li><a rel='nofollow' href="#">Profile</a></li>
    <li><a rel='nofollow' href="#">Messages</a></li>

The active tab is marked with class="active".

There is great example of static navbar and Router/Outlet feature at, but I can't understand how to create a dynamic navbar/menu/tab view.

As far as I understand, it is possible to use class bindings in each menu item:

 classNameBindings: ['isActive:active']

But where is the right place to switch isActive attributes ?

Source: (StackOverflow)

What is the complete list of expected JSON responses for DS.RESTAdapter?

I am attempting to write a custom express.js based server for an Ember.js app. I am getting along fairly well but I'm constantly getting stuck trying to guess what JSON responses Ember Data is expecting at a given moment.

This brand new documentation is a great start but not complete enough.

My stabbing in the dark has lead me to understand (Ember pre4, Ember Data 11):

Context                                Server URL          Method     Req. Data                  Resp. Data
~~~~~~~                                ~~~~~~~~~~          ~~~~~~     ~~~~~~~~~                  ~~~~~~~~~~
Getting a list of all users            /users              GET                                   {"users":[{...},{...}]}
Getting a particular user              /users/123          GET                                   {"user":{...}}
Creating a user                        /users              POST       {"user":{...}}             ???
Updating a user                        /users/123          PUT        {"user":{...}}             ???
Deleting a user                        /users/123          DELETE     ???                        ???

Creating a user (bulkUpdate)           /users              POST       {"users":[{...},{...}]}    ???
Updating a user (bulkUpdate)           /users/bulk         PUT        {"users":[{...},{...}]}    ???
Deleting a user (bulkUpdate)           /users/123          DELETE     ???                        ???

Can someone help me fill in some of these blanks?

Edit, the complete list of expected JSON responses

These responses were gleaned from the ember-data REST adapter unit tests and by watching the network traffic on the Example Ember Data app.

Context                                Server URL          Method     Req. Data                  Resp. Data
~~~~~~~                                ~~~~~~~~~~          ~~~~~~     ~~~~~~~~~                  ~~~~~~~~~~
Getting a list of all users            /users              GET                                   {"users":[{...},{...}]}
Getting a particular user              /users/123          GET                                   {"user":{...}}
Creating a user                        /users              POST       {"user":{...}}             {"user":{...}}
Updating a user                        /users/123          PUT        {"user":{...}}             {"user":{...}}
Deleting a user                        /users/123          DELETE     N/A                        null

Creating a user (bulkCommit)           /users              POST       {"users":[{...},{...}]}    {"users":[{...},{...}]}
Updating a user (bulkCommit)           /users/bulk         PUT        {"users":[{...},{...}]}    {"users":[{...},{...}]}
Deleting a user (bulkCommit)           /users/bulk         DELETE     {"users":[1,2]}            {"users":[1,2]}

Source: (StackOverflow)

Using Ember.js, how do I run some JS after a view is rendered?

How do I run a function after an Ember View is inserted into the DOM?

Here's my use-case: I'd like to use jQuery UI sortable to allow sorting.

Source: (StackOverflow)

ember.js + handlebars: render vs outlet vs partial vs view vs control

There are scattered explainations of each around, but I'm still not 100% clear on the differences & usage. Could someone give me a side-by-side comparison?

{{outlet NAME}}

Note: this post was very helpful with partial vs render

Source: (StackOverflow)

EmberJS: How to load multiple models on the same route?

While I am not new to web development, I am quite new to to client-side MVC frameworks. I did some research and decided to give it a go with EmberJS. I went through the TodoMVC guide and it made sense to me...

I have setup a very basic app; index route, two models and one template. I have a server-side php script running that returns some db rows.

One thing that is very confusing me is how to load multiple models on the same route. I have read some information about using a setupController but I am still unclear. In my template I have two tables that I am trying to load with unrelated db rows. In a more traditional web app I would have just issued to sql statements and looped over them to fill the rows. I am having difficulty translating this concept to EmberJS.

How do I load multiple models of unrelated data on the same route?

I am using the latest Ember and Ember Data libs.


although the first answer gives a method for handling it, the second answer explains when it's appropriate and the different methods for when it isn't appropriate.

Source: (StackOverflow)

Ember CLI testing complicated model relationships

As far as I can see, when testing ember-data models in ember CLI, all relationships have to be listed in needs. This is fine if the structure is simple, but in many cases there will be multiple layers.

For example, if models are set up with the following relationships defined:

Model a:
   belongsTo: b
   belongsTo: c

Model b:
   hasMany: a
   hasMany: d

Model c:
   hasMany: a
   belongsTo: e

Model d:
   hasMany b

Model e:
   hasMany c

Then every unit test for any of these models will require every other model listed in needs, e.g. A test for c:

needs: [
    'model:a' // Because c -> a
    'model:e' // Because c -> e
    'model:b' // Because c -> a -> b
    'model:d' // Because c -> a -> b -> d

My actual configuration is a lot more complicated with 14 models, and each one indirectly related to all the others.

Is my understanding correct? Is there a more efficient way of doing this? Or is there a good reason for doing it this way that I am missing?

Source: (StackOverflow)

ember.js and the server

I'm looking at Ember.js and have been reading the docs to try and understand how to use it. I get it (pretty well), except for one thing. To my way of thinking in the MVC pattern, the Model is the repository for data in the application. I can see how that works for client side data in Ember.js. What I don't get is how to tie that data back to the server so that if data changes at the client, the changes are updated in server. And vice versa. I've been doing this by in in my web applications making Ajax/JSON calls to back and forth to the server, I'm just not getting how to do that using Ember.js.

Source: (StackOverflow)

infinite scroll with ember.js (lazy loading)

I have a view where there can be a large number of items for the user to scroll through and I'd like to implement infinite scrolling to enable progressive loading of the content.

It looks like some folks have done pagination but Google doesn't bring up anyone discussing how they've done infinite lists with Ember/Ember Data. Anyone already worked through this and have a blog post/example code to share?

Source: (StackOverflow)