how to implement not with if statement in ember handlebar?

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}}

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?

What are the key differences between Meteor, Ember.js and Backbone.js? [closed]

Learning Ember.js / Backbone.js has been on my to-do list for a while. Now that Meteor is out, I am just wondering if anyone with experience of Meteor, Ember.js and Backbone.js can summarize the key differences and pros and cons of these three JavaScript frameworks for a person without any experience for any of them.

Specifically, I would like to know which tasks each framework is more suitable for, and why the others aren't.

Edit: now that I read a little bit more on Meteor, it seems to be more similar to Knockout.js rather than Backbone.js. So any comparison with Knockout.js is welcome too.

Views vs Components in Ember.js

I am learning ember.js, and I am trying to understand the difference between a view and a component. I see both as a way of making reusable components.

From Ember's website on views:

Views in Ember.js are typically only created for the following reasons:
-When you need sophisticated handling of user events
-When you want to create a re-usable component

From Ember's website on components:

A component is a custom HTML tag whose behavior you implement using JavaScript and whose appearance you describe using Handlebars templates. They allow you to create reusable controls that can simplify your application's templates.

So what is the main difference between a view and a component? And what would be a common example where I would prefer to use a view over a component and vice versa?

Separate REST JSON API server and client?

I'm about to create a bunch of web apps from scratch. (See http://50pop.com/code for overview.) I'd like for them to be able to be accessed from many different clients: front-end websites, smartphone apps, backend webservices, etc. So I really want a JSON REST API for each one.

Also, I prefer working on the back-end, so I daydream of me keeping my focus purely on the API, and hiring someone else to make the front-end UI, whether a website, iPhone, Android, or other app.

Please help me decide which approach I should take:

TOGETHER IN RAILS

Make a very standard Rails web-app. In the controller, do the respond_with switch, to serve either JSON or HTML. The JSON response is then my API.

Pro: Lots of precedent. Great standards & many examples of doing things this way.

Con: Don't necessarily want API to be same as web app. Don't like if/then respond_with switch approach. Mixing two very different things (UI + API).

REST SERVER + JAVASCRIPT-HEAVY CLIENT

Make a JSON-only REST API server. Use Backbone or Ember.js for client-side JavaScript to access API directly, displaying templates in browser.

Pro: I love the separation of API & client. Smart people say this is the way to go. Great in theory. Seems cutting-edge and exciting.

Con: Not much precedent. Not many examples of this done well. Public examples (twitter.com) feel sluggish & are even switching away from this approach.

REST SERVER + SERVER-SIDE HTML CLIENT

Make a JSON-only REST API server. Make a basic HTML website client, that accesses the REST API only. Less client-side JavaScript.

Pro: I love the separation of API & client. But serving plain HTML5 is quite foolproof & not client-intensive.

Con: Not much precedent. Not many examples of this done well. Frameworks don't support this as well. Not sure how to approach it.

Especially looking for advice from experience, not just in-theory.

Angular.js Backbone.js or which has better performance [closed]

I am a web developer and I'm starting to develop a web application on a large scale, but I'm not sure what framework to use. I was thinking of Angular.js, but I also considered Backbone.js. For you, what would be the best framework? or at least have a comparison between the two to see the performance.

What is the difference between a route and resource in New Router API?

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.

Ember.js or Backbone.js for Restful backend [closed]

I already know that ember.js is a more heavy weight approach in contrast to backbone.js. I read a lot of articles about both.

I am asking myself, which framework works easier as frontend for a rails rest backend. For backbone.js I saw different approaches to call a rest backend. For ember it seems that I have to include some more libraries like 'data' or 'resources'. Why are there two libraries for this?

So whats the better choice? There arent a lot of examples to connect the frontend with the backend too. Whats a good working example for a backend rest call to this:

URI: ../restapi/topics GET auth credentials: admin/secrect format: json

What is Ember RunLoop and how does it work?

I am trying to understand how Ember RunLoop works and what makes it tick. I have looked at the documentation, but still have many questions about it. I am interested in understanding better how RunLoop works so I can choose appropriate method within its name space, when I have to defer execution of some code for later time.

• When does Ember RunLoop start. Is it dependant on Router or Views or Controllers or something else?
• how long does it approximately take (I know this is rather silly to asks and dependant on many things but I am looking for a general idea, or maybe if there is a minimum or maximum time a runloop may take)
• Is RunLoop being executed at all times, or is it just indicating a period of time from beginning to end of execution and may not run for some time.
• If a view is created from within one RunLoop, is it guaranteed that all its content will make it into the DOM by the time the loop ends?

Forgive me if these are very basic questions, I think understanding these will help noobs like me use Ember better.

SPA best practices for authentication and session management

When building SPA style applications using frameworks like Angular, Ember, React, etc. what do people believe to be some best practices for authentication and session management? I can think of a couple of ways of considering approaching the problem.

1. Treat it no differently than authentication with a regular web application assuming the API and and UI have the same origin domain.

   This would likely involve having a session cookie, server side session storage and probably some session API endpoint that the authenticated web UI can hit to get current user information to help with personalization or possibly even determining roles/abilities on the client side. The server would still enforce rules protecting access to data of course, the UI would just use this information to customize the experience.

2. Treat it like any third-party client using a public API and authenticate with some sort of token system similar to OAuth. This token mechanism would used by the client UI to authenticate each and every request made to the server API.

I'm not really much of an expert here but #1 seems to be completely sufficient for the vast majority of cases, but I'd really like to hear some more experienced opinions.

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.

Update

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.

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 '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>

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?

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 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]}

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>
</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 ?