无法使用 Ember-Model 显示 JSON 数据答案

【问题标题】：Not able to show JSON data using Ember-Model无法使用 Ember-Model 显示 JSON 数据
【发布时间】：2013-07-24 11:05:30
【问题描述】：

我已经开始使用 Ember 模型，但是 JSON 数据没有加载到视图中。此外，我没有在控制台上收到错误或警告。

这是我的 app.js，

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
    renderTemplate : function(controller) {
         this.render('MyTemplate', {
             controller : 'Index'

        });
    },
    model : function() {
        return App.MyTemplateModel.find();
    }
});

App.IndexController = Ember.ArrayController.extend({

});


App.MyTemplateModel = Ember.Model.extend({
    id : Ember.attr(),
    last_name : Ember.attr(),
    first_name : Ember.attr(),
    suffix : Ember.attr(),
    expiration : Ember.attr()
});

App.MyTemplateModel.url = "http://ankur1.local/index.php/api/example/users/";
App.MyTemplateModel.adapter = Ember.RESTAdapter.create();
var existing = App.MyTemplateModel.find();
App.MyTemplateModel.camelizeKeys = true;

这是我的 HTML，

<body>
        <script type="text/x-handlebars" data-template-name="myTemplate">
            <input type="text" id="name" placeholder="name!"/>
            <button {{action clickButton}} >Button</button>
            {{view Ember.TextField valueBinding="userName"}}

            <label >{{userName}}</label>

            {{#each item in model}}
            <tr><td>
            {{id}} <small> {{item.first_name}}</small>
            </td></tr>
            {{/each}}
        </script>

        <script type="text/x-handlebars">
            <h1>Application Template</h1>
            {{outlet}}
        </script>

    </body>

我的代码中可能缺少什么？

此外，我可以在控制台上使用，

var u = App.MyTemplateModel.find(1); 
u.get('first_name');

【问题讨论】：

标签： json ember.js ember-model

【解决方案1】：

当您使用 render 或 {{render}} 帮助器时，您正在使用不同的控制器进行渲染。您必须为其提供要使用的模型。尝试更改为，

renderTemplate : function(controller) {
    this.render('myTemplate', {
        controller : controller
    });
},

这里controller 是IndexRoute 的控制器，即：- IndexController 填充有model 挂钩。

编辑：发布 jsbin

您正在使用MyTemplateModel 循环查看视图中的项目。您需要遍历content、model 或controller，它们都对应于支持该路由的模型。

{{#each item in content }}
  <tr><td>
  {{item.id}} <p> {{item.first_name}}</p>
  </td></tr>
{{/each}}

除此之外，您可能需要在模型上声明 rootKey 和 collectionKey 以让 ember-model 正确识别您的 json 响应。

App.MyTemplateModel.rootKey = 'user';
App.MyTemplateModel.collectionKey = 'users';

这是更新后的jsbin。

【讨论】：

你能详细解释一下吗？我想我也做过同样的事情。
您将 Index 传递给控制器，这会导致通过 Ember IOC 容器进行查找，并提供不同的控制器。在答案中，我将同一控制器从 renderTemplate 参数转发到 render 方法。
没有变化 :( 几个小时前我编辑了代码，你能再看看吗？
很难说，尝试上传有问题的 jsbin。您可以使用 mockjax 之类的东西来模拟服务器结果。
不是，我说的是问题中的代码，你能看看吗？

【解决方案2】：

我需要做的是在我的 JSON 序列化程序中不指定根。换句话说，而不是...

{
  MyTemplateModel:
  {
    id: 1,
    etc...
  }
}

看起来像：

{
  id: 1,
  etc....
}

我只能假设，因为 ember-model 已经期望模型 MyTemplateModel 作为响应，它不会在 JSON 中查找它。希望这会有所帮助。

【讨论】：