Ember - Serializer - Working

Ember - Serializer - Working

by Nirvanachain

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.min.js"></script>
<script type="text/x-handlebars">
    <nav>
        {{#link-to 'index'}}Home{{/link-to}}
        {{#link-to 'pages'}}Pages{{/link-to}}
    </nav>

    {{outlet}}
</script>

<script type="text/x-handlebars" id="index">
    <h1>Index Template!!!</h1>
</script>

<script type="text/x-handlebars" id="pages">
    <h1>Pages Template!!!</h1>
    {{log model}}
    
    {{#each}}
    Name = {{name}}
    <ul>
        {{#each child in children}}
            <li> {{child.name}} </li>
        {{/each}}
    </ul>
    
    <div>
        Owner: {{input type="checkbox" name="owner" checked=owner}}
    </div>
    <div>
        Employee: {{input type="checkbox" name="employee" checked=employee}}
    </div>
    <div>
        Customer: {{input type="checkbox" name="customer" checked=customer}}
    </div>
    {{/each}}
</script>

JavaScript

App = Ember.Application.create();

/***
  MOCK SERVER DATA
***/
var JSON_DATA = {
    "name": "Page One",
    "path": "/",
    "parent": null,
    "roles": {
        "owner": false,
        "employee": false,
        "customer": true
    },
    "children": [
        {
            "name": "Sub Page 1",
            "path": "/SubPage1",
            "parent": "/"
        },
        {
            "name": "Sub Page 2",
            "path": "/SubPage2",
            "parent": "/"
        },
        {
            "name": "Sub Page 3",
            "path": "/SubPage3",
            "parent": "/"
        },
    ]
};
        
App.Page = DS.Model.extend({
    name: DS.attr('string'),
    path: DS.attr('string'),
    parent: DS.belongsTo('page'),
    isOwner: DS.attr('boolean'),
    isEmployee: DS.attr('boolean'),
    isCustomer: DS.attr('boolean'),
    children: DS.hasMany('child')
});

App.Child = DS.Model.extend({
    name: DS.attr('string'),
    path: DS.attr('string'),
    parent: DS.attr('string')
});
/***
  PAGE ADAPTER
***/
App.PageAdapter = DS.RESTAdapter.extend({
  findAll: function(store, type, sinceToken) { 
    return Ember.RSVP.resolve(JSON_DATA);
  }
});
        
/***
    PAGES SERIALIZER
***/
App.PageSerializer = DS.RESTSerializer.extend({
    normalizePayload: function(payload) {
        
        payload.children.forEach(function(child, i) {
            child.id = i + 1;
        });
        
        // Array of ids for the 'children' property in the payload.        
        var mappedChildren = payload.children.map(function(child, index) {
            return index + 1;
        });
        
        payload = { 
            pages: [{
                id: 1,
                name: payload.name,
                path: payload.path,
                parent: payload.parent,
                isOwner: payload.roles.owner,
                isEmployee: payload.roles.employee,
                isCustomer: payload.roles.customer,
                children: mappedChildren 
          ...