Ember.js looks for model of first data property returned from webapi controller

Question

Any llight anyone can shed on this problem that ive been struggling with for a few hours would be great...

I'm new to ember.js and I'm trying to load a user model into the global scope of my application in the following way:

(Setup is based on this template and uses the webapi_adapter and serializer from there.)

So as far as I could tell to do this i needed to use the following:

ApplicationController.js

App.ApplicationController = Em.ObjectController.extend({
    hasError: function () {
        var currentError = this.get("error");
        return !(currentError === '' || currentError === null);
    }.property('error'),
});

User.js

var attr = DS.attr;
App.User = DS.Model.extend({
    email: attr('string'),
    accountId: attr('string'),
    firstName: attr('string'),
    lastName: attr('string'),
});

App.UserSerializer = DS.WebAPISerializer.extend({
    primaryKey: 'email',

    normalizeHash: {
        user: function (hash) {
            hash.email = hash.email;
            return hash;
        },
    }
});

ApplicationRoute.js

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('user');
    },
});

UserController.cs

//GET api/user
        public object GetCurrentUser()
        {
            var u = AuthenticatedUser;
            return new UserDto(u);
        }

UserDto.cs

public class UserDto
{
    public UserDto() { }

    public UserDto(User user)
    {
        Email = user.Email;
        FirstName = user.FirstName;
        LastName = user.LastName;
        AccountId = user.AccountId;
    }

    [Key]
    public string Email { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }

    public string AccountId { get; set; }

}

the problem I'm encountering is that I get the error

Error while processing route: index No model was found for 'email' Error: No model was found for 'email'

where email is the first json property returned in the user data, i.e.:

{"Email":"johnsmith@test.com","FirstName":"John","LastName":"Smith","AccountId":"AccountJS"}

Any ideas what im doing wrong?

FYI:

router.js

App.Router.map(function () {
    this.route("index", { path: "/" });
});

Answer 1

I did the following to show the user list, you can use it as reference:

App\controllers\UserListsController.js

App.UserListsController = Ember.ArrayController.extend({
    error: ""
});

App\models\UserList.js

var attr = DS.attr;

App.UserList = DS.Model.extend({
    email: attr('string'),
    accountId: attr('string'),
    firstName: attr('string'),
    lastName: attr('string'),
});

App.UserListSerializer = DS.RESTSerializer.extend({
    primaryKey: 'email',

    //// ember-data-1.0.0-beta2 does not handle embedded data like they once did in 0.13, so we've to update individually if present
    //// once embedded is implemented in future release, we'll move this back to WebAPISerializer.
    //// see https://github.com/emberjs/data/blob/master/TRANSITION.md for details
    extractArray: function (store, primaryType, payload) {
        var primaryTypeName = primaryType.typeKey;

        var typeName = primaryTypeName,
            type = store.modelFor(typeName);

        var data = {};
        data[typeName] = payload;
        payload = data;
        return this._super.apply(this, arguments);
    },

    normalizeHash: {
        userList: function (hash) {
            hash.email = hash.id;
            return hash;
        }
    }

});

App\routes\TodoListRoute.js, add

App.UserListsRoute = Ember.Route.extend({
    model: function () {
        return this.store.find('userList');
    },
});

App\templates_navbar.hbs, add

<li>
    {{#linkTo 'userLists'}}
      userList
    {{/linkTo}}
</li>

App\templates\userLists.hbs

<h2>Users</h2>

<section id="lists">
    {{#each controller}}
    <article class="todoList">
        <p>{{email}}</p>
        <p>{{firstName}}</p>
        <p>{{lastName}}</p>
    </article>
    {{/each}}
</section>

App\router.js, add

this.route("userLists", { path: "/userList" });

Controllers\UserListController.cs, sample:

public class UserListController : ApiController
{
    private TodoItemContext db = new TodoItemContext();

    // GET api/userList
    public List<UserDto> GetUserLists()
    {
        var u = new User
        {
            Email = "test@test.com",
            FirstName = "first",
            LastName = "last",
            AccountId = "1324"
        };
        List<UserDto> users = new List<Models.UserDto>();
        users.Add(new UserDto(u));
        return users;
    }

    protected override void Dispose(bool disposing)
    {
        db.Dispose();
        base.Dispose(disposing);
    }
}

Models\User.cs

public class User
{
    public User() { }

    [Key]
    public string Email { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }

    public string AccountId { get; set; }
}


public class UserDto
{
    public UserDto() { }

    public UserDto(User user)
    {
        Email = user.Email;
        FirstName = user.FirstName;
        LastName = user.LastName;
        AccountId = user.AccountId;
    }

    [Key]
    public string Email { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }

    public string AccountId { get; set; }
}

Answer 2

It looks like Ember.js expects your API response data to be like this:

{ 
    "user": {
        "Email": "johnsmith@test.com",
        "FirstName": "John",
        "LastName": "Smith",
        "AccountId": "AccountJS"
    }
}

I don't know about the webapi_adapter you mention, but this is how RESTAdapter expects the response to be formatted: http://emberjs.com/api/data/classes/DS.RESTAdapter.html