Loading Mysql Data from Laravel Backend using Ember.js

Question

I created some restful routes in laravel 4 to provide some sample data to my ember.js app at front end. I am using Laravel 4 at backend and mysql as a database.

While loading data from mysql server I came across one strange error. It successfully load all the contents from one ember resource/route while if the id is passed to retrieve full info on certain item.. only title gets loaded but not the content..

What i am trying to say is, i have two resource route at ember app: '/about' and 'profiles/:profiles_id'. '/about' loads the list of all the entries from one table, but i am only showing the title of the row. And '/profiles/:profiles_id' was supposed to show title and content column as well to give little more description to the single selected item. If i click the link, the title which was loaded earlier at the link is only loaded but at the content part it shows

< App.Profile:ember261:2 >

I have included my code here:

Ember html page code:

<script type="text/x-handlebars">
        <div>
            <nav class="top-bar" data-options="is_hover:true">
                <ul class="title-area">
                    <li class="name">
                      <h1><a href="#">My Ember Site </a></h1>
                    </li>
                </ul>

                <section class="top-bar-section">
                    <ul class="left">
                        <li class="name">{{#linkTo "index"}}Home{{/linkTo}}</li>
                        <li>{{#linkTo "about"}}About{{/linkTo}}</li>
                    </ul>
                </section>
            </nav>
        </div>

        <div class="container">
            <div class="row">
                <h1>Welcome to Ember.js!</h1>
                {{outlet}}
            </div>
        </div>
        </ul>
    </script>

    <script type="text/x-handlebars" data-template-name="index">
        <p>This is Index Page</p>
    </script>

    <script type="text/x-handlebars" data-template-name="about">
        <div class="container">
            <div class="row">
                {{outlet}}
                <ul>
                {{#each controller}}
                    <li>{{#linkTo "profiles" this}}{{title}}{{/linkTo}}</li>
                {{/each}}
                </ul>
            </div>
        </div>
    </script>       

    <script type="text/x-handlebars" data-template-name="profiles">
        <h3>Hello! {{title}}</h3>
        <p>
            {{content}}
        </p>
    </script>

Ember App.js (I have included all the ember code in this file):

var App = Ember.Application.create();

App.Store = DS.Store.extend({
revision: 12,
adapter: DS.RESTAdapter.create({
    bulkCommit: false,
    url: "http://localhost:8000/laravel_4/public"
})
});

App.Profile = DS.Model.extend({
title: DS.attr('string'),
content: DS.attr('string')
});

App.Router.map(function(){
this.resource("about");
this.resource('profiles', {path: '/profiles/:profiles_id'});
});

App.ApplicationRoute = Ember.Route.extend();

App.AboutController = Ember.ArrayController.extend();

App.AboutRoute = Ember.Route.extend({
 model: function() {
    return App.Profile.find();
 }
});

App.ProfilesRoute = Ember.Route.extend({
 model: function(params) {
    return App.Profile.find(params.profiles_id);
 }
});

$(document).foundation();

Laravel Routes.php file code:

Route::resource('profiles', 'ProfilesController');

Laravel ProfilesController code:

<?php

 class ProfilesController extends \BaseController {

public function index()
{
    return [
                "profiles"=> 
                    Page::all()->toArray()
            ];
}

public function show($id)
{
    return 
    [
        "profile"=> 
                Page::find($id)->toArray()
    ];
}

In Laravel it works fine, both the urls, and even while making the request via ember the data gets loaded properly and data from title column from database is shown, but only in content column error like

< App.Profile:ember369:1 >

for first entry and

< App.Profile:ember261:2 >

for second entry is shown, but title gets loaded successfully and shown in the screen.

There are no errors in console as well.

sjmog · Accepted Answer · 2013-10-18 18:35:22Z

1

'content' has a very specific meaning in Ember: it's another name for the Controller's model, which is drawn from the Route.

As a result, when you try to render {{content}}, you're actually rendering the current controller's model. In your case, that's a record of the App.Profile model.

To solve this, rename the 'content' property on your App.Profile model to something like 'profileContent', and use {{profileContent}} in your templates. Don't forget to update the corresponding attributes on your backend model and your database fields, or serialise Ember's payloads when they're being committed to the server so that the server still sees 'profileContent' as 'content'.

answered Oct 18, 2013 at 18:35

sjmog

1615 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

monk Over a year ago

I did change the name but now it shows nothing, no errors no content. i refresh the page and now there is only title. i change the name to profileContent in mysql column, migration files, ember template, everywhere but no luck

monk Over a year ago

instead of profileContent i again renamed it to description, now it works properly.. but i think it is loading content from previous route.. as it loads quickly.. thank you so much for your help

sjmog Over a year ago

No problem! Generally, we camelCase Ember Model attributes (it's JavaScript, so that's sensible), and try to underscore things on the server side. The reason that profileContent didn't work is because Ember's RESTAdapter (which you're probably using) expects to receive underscored JSON, not camelCased JSON. In other words, it's expecting profile_content in the JSON it receives from the server, not profileContent. I hope that helps.

Collectives™ on Stack Overflow

Loading Mysql Data from Laravel Backend using Ember.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related