title: Loading Mysql Data from Laravel Backend using Ember.js
body: <p>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.</p>
  
  <p>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..</p>
  
  <p>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 </p>
  
  <blockquote>
    <p>&lt; App.Profile:ember261:2 ></p>
  </blockquote>
  
  <p>I have included my code here:</p>
  
  <p>Ember html page code:</p>
  
  <pre><code>&lt;script type="text/x-handlebars"&gt;
          &lt;div&gt;
              &lt;nav class="top-bar" data-options="is_hover:true"&gt;
                  &lt;ul class="title-area"&gt;
                      &lt;li class="name"&gt;
                        &lt;h1&gt;&lt;a href="#"&gt;My Ember Site &lt;/a&gt;&lt;/h1&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;section class="top-bar-section"&gt;
                      &lt;ul class="left"&gt;
                          &lt;li class="name"&gt;{{#linkTo "index"}}Home{{/linkTo}}&lt;/li&gt;
                          &lt;li&gt;{{#linkTo "about"}}About{{/linkTo}}&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/section&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;h1&gt;Welcome to Ember.js!&lt;/h1&gt;
                  {{outlet}}
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/ul&gt;
      &lt;/script&gt;
  
      &lt;script type="text/x-handlebars" data-template-name="index"&gt;
          &lt;p&gt;This is Index Page&lt;/p&gt;
      &lt;/script&gt;
  
      &lt;script type="text/x-handlebars" data-template-name="about"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  {{outlet}}
                  &lt;ul&gt;
                  {{#each controller}}
                      &lt;li&gt;{{#linkTo "profiles" this}}{{title}}{{/linkTo}}&lt;/li&gt;
                  {{/each}}
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/script&gt;       
  
      &lt;script type="text/x-handlebars" data-template-name="profiles"&gt;
          &lt;h3&gt;Hello! {{title}}&lt;/h3&gt;
          &lt;p&gt;
              {{content}}
          &lt;/p&gt;
      &lt;/script&gt;   
  </code></pre>
  
  <p>Ember App.js (I have included all the ember code in this file):</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>Laravel Routes.php file code:</p>
  
  <pre><code>Route::resource('profiles', 'ProfilesController');
  </code></pre>
  
  <p>Laravel ProfilesController code:</p>
  
  <pre><code>&lt;?php
  
   class ProfilesController extends \BaseController {
  
  public function index()
  {
      return [
                  "profiles"=&gt; 
                      Page::all()-&gt;toArray()
              ];
  }
  
  public function show($id)
  {
      return 
      [
          "profile"=&gt; 
                  Page::find($id)-&gt;toArray()
      ];
  }
  </code></pre>
  
  <p>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 </p>
  
  <blockquote>
    <p>&lt; App.Profile:ember369:1 ></p>
  </blockquote>
  
  <p>for first entry and </p>
  
  <blockquote>
    <p>&lt; App.Profile:ember261:2 ></p>
  </blockquote>
  
  <p>for second entry is shown, but title gets loaded successfully and shown in the screen.</p>
  
  <p>There are no errors in console as well.</p>