ember.js
Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A framework for creating ambitious web applications.
I am trying to understand the difference between a Route and a Resource. The way I understand Resource helps to set sub paths of a Route object to another Route Object. But its unclear when i think of default name mapping happening for paths as well.
Source: (StackOverflow)
I have a statement like below
{{#if IsValid}}
but i want to know that how can i use if statement with not like below
{{#if not IsValid}}
Source: (StackOverflow)
From reading the docs, it looks like you have to (or should) assign a model to a route like so:
App.PostRoute = Ember.Route.extend({
model: function() {
return App.Post.find();
}
});
What if I need to use several objects in a certain route? i.e. Posts, Comments and Users? How do I tell the route to load those?
Source: (StackOverflow)
It's been difficult to keep up with the evolution of Ember JS as its approached (and reached!) version 1.0.0. Tutorials and documentation have come and gone, leading to a lot of confusion about best practices and the intent of the original developers.
My question is exactly that: What are the best practices for Ember JS? Are there any updated tutorials or working samples showing how Ember JS is intended to be used? Code samples would be great!
Thanks to everyone, especially the Ember JS devs!
Source: (StackOverflow)
I try to build a link to a nested route and want to add a class to this link (for twitter bootstrap)
The result should something like this:
< a rel='nofollow' href="/#/rents/42" class="btn btn-primary btn-small">do something< /a>
First try:
{{#link-to "rent" rent}}
gives me a link to the ressource but I cannot specify a (css) class. In the docs I see that only the title attribute can be specified
Second try:
< a rel='nofollow' href="/#/rents/{{rend.id}}" class="btn btn-primary btn-small">do something< /a>
is also a bad idea, because Ember will add its helper tags [for automatic updates] in the href.
So what can I do?
Source: (StackOverflow)
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 'http://use.typekit.net/abcdef.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".
login:1
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.
login:20
Refused to load the script 'http://connect.facebook.net/en_US/all.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".
login:1
Refused to load the script 'http://maps.googleapis.com/maps/api/js?libraries=places' 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="//use.typekit.net/abcdef.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
Source: (StackOverflow)
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):
- What is the best way – today – to implement cached models in Local Storage and syncing them with remote data as needed?
- 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
|
UI
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)
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)
I have an application, which will have a view layer organized in three parts:
- Sidebar
- Toolbar-left
- 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)
ember-data.js: https://github.com/emberjs/data/tree/0396411e39df96c8506de3182c81414c1d0eb981
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)
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)
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:
- What are the effective differences between the two efforts?
- What is history of the split?
- What is sproutcore future, where is it going now?
- Is Ember going develop to be a complete replacement for sproutcore?
Source: (StackOverflow)
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>
</ul>
The active tab is marked with class="active".
There is great example of static navbar and Router/Outlet feature at http://jsfiddle.net/schawaska/pfbva/, 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)
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 http://emberjs.com/guides/models/the-rest-adapter/ 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)
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)