使用 Ember.js 从 Laravel 后端加载 Mysql 数据

Question

我在 laravel 4 中创建了一些安静的路由，以在前端为我的 ember.js 应用程序提供一些示例数据。我在后端使用 Laravel 4 并使用 mysql 作为数据库。

在从 mysql 服务器加载数据时，我遇到了一个奇怪的错误。它成功地从一个 ember 资源/路由加载所有内容，而如果传递 id 以检索特定项目的完整信息.. 仅加载标题，但不加载内容..

我想说的是，我在 ember 应用程序中有两个资源路由：'/about' 和'profiles/:profiles_id'。 '/about' 从一个表中加载所有条目的列表，但我只显示行的标题。并且 '/profiles/:profiles_id' 应该也显示标题和内容列，以便对单个选定项目提供更多描述。如果我点击链接，之前在链接中加载的标题只会被加载，但在内容部分它会显示

我在这里包含了我的代码：

Ember html 页面代码：

<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（我已经在这个文件中包含了所有的 ember 代码）：

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 文件代码：

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

Laravel ProfilesController 代码：

<?php

 class ProfilesController extends \BaseController {

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

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

在 Laravel 中，两个 url 都可以正常工作，即使通过 ember 发出请求，数据也会正确加载，并且会显示来自数据库的标题列的数据，但只会出现在内容列错误中，例如

对于第一个条目和

显示第二个条目，但标题已成功加载并显示在屏幕中。

控制台也没有错误。

Answer 1

'content' 在 Ember 中有一个非常具体的含义：它是 Controller 的模型的别称，取自 Route。

因此，当您尝试渲染{{content}} 时，您实际上是在渲染当前控制器的模型。在您的情况下，这是 App.Profile 模型的记录。

要解决此问题，请将 App.Profile 模型上的“content”属性重命名为“profileContent”，并在模板中使用{{profileContent}}。不要忘记更新后端模型和数据库字段上的相应属性，或者在将 Ember 的负载提交到服务器时序列化它们，以便服务器仍将“profileContent”视为“内容”。