1

下面的代码可以正常工作，因为我可以environments通过content.dev.name.

不过，我正在努力通过 AJAX 请求填充这些数据。

我有一个休息 API，它返回如下控制器中的结构。应用加载时需要调用一次。

这是我的工作代码：

控制器

App.EnvironmentsController = Ember.Controller.extend();
App.EnvironmentsController.reopenClass({
  find: function(){
    return {dev: {key: 'dev', name: 'Development'}, prod: {key: 'prod', name: 'Production'}};
    return this.content;
  },
});
App.EnvironmentsView = Ember.View.extend({
  templateName: 'environments'
});

路线

...
router.get('applicationController').connectOutlet('environments', App.EnvironmentsController.find());
...

模板

  <script type="text/x-handlebars" data-template-name="environments">
    <ul id="env-menu">
      {{#with content}}
        <li>{{dev.name}}</li>
        <li>{{prod.name}}</li>
      {{/with}}
    </ul>
  </script>

这是带有 AJAX 的控制器，我无法将数据通过相同格式传递给模板。

注意：我知道 response.data.environments 本身返回的结构与我上面的手动编码对象相同。

App.EnvironmentsController = Ember.Controller.extend();
App.EnvironmentsController.reopenClass({
  environments: {},
  find: function(){
    $.ajax({
      url: 'http://localhost:3000/environments',
      dataType: 'json',
      context: this,
      success: function(response){
        this.environments = response.data.environments;
      }
    });
    return this.environments;
  },
});
App.EnvironmentsView = Ember.View.extend({
  templateName: 'environments'
});

请注意，当控制器是数组控制器时，我有类似的工作，并且数据作为数组返回。我需要知道如何专门处理对象。

更新：来自问题的更多信息

这是一个小提琴：http: //jsfiddle.net/coder1/csvZX/

我对不同的模式持开放态度。我只是想通过控制器获取对象并通过控制器发送它。

这是我开始使用的一个非常棒的教程 ( http://trek.github.com/ )，我可以使用数组控制器来完成这项工作，而不是在我使用单个对象时。

4

2 回答 2

4

我调整了您的jsfiddle，它现在可以正确显示您的数据。

关键是数据由模型而不是控制器处理。我修改了您原来的 jsfiddle 并将数据加载部分分解为一个类，该类负责在find()函数中创建自身的实例。这与 Trek 示例的工作方式相同。

新型号代码：

App.Environments = Ember.Object.extend({

});
App.Environments.reopenClass({
    find: function() {
        var env = App.Environments.create({});
        console.log("environments find()");
        // simulate an ajax call, hard coding response below
        setTimeout(function() {
            // Fake response
            console.log("fake ajax response");
            console.log(env);
            env.setProperties({
                dev: {
                    key: 'dev',
                    name: 'Development'
                },
                prod: {
                    key: 'prod',
                    name: 'Production'
                }
            });
            console.log(env);
        }, 1000);
        return env;
    }
});

对谷歌的虚假 ajax 调用不起作用，所以我将其关闭并使用setTimeout()调用来模拟 ajax 调用的延迟。

请注意，该find()方法创建了一个新Environments对象，然后让 fake-ajax 调用用数据填充它。 find()立即返回新创建的空Environments对象，由控制器和模板访问。该setProperties()方法用于以 Ember 的绑定系统可以检测更改并确保它们传播到模板中的方式更新 this 的属性。

唯一的另一件事是更新connectOutlets以使用新Environments模型和：

router.get('applicationController').connectOutlet('environments', App.Environments.find());

这行代码调用find()，它返回新创建的Environments对象并将其传递给控制器​​的一个实例，并用视图EnvironmentsController填充模板。{{outlet}}applicationEnvironmentsView

确保查看有效的jsfiddle示例。

于 2013-01-02T21:17:09.343 回答
1

在我的观察中，您可能犯的错误是：

  1. this.environments = response.data.environments;应该使用set,addObject或者 Ember 的方式。

  2. 如果您使用变量environment而不是content在模板中使用它。

这是一个小提琴http://jsfiddle.net/csvZX/17/

于 2013-01-02T19:06:21.143 回答