Question

以下代码与我期望的一样，我可以通过environments访问content.dev.name模板中的数据。

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

我有一个rest 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/）我开始使用，我可以使用数组控制器，但不是在我使用单个对象时。

Answer 1

我调整了您的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的绑定系统可以检测到更改并确保它们传播到模板中。

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

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

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

请务必查看有效的jsfiddle示例。

Answer 2

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

this.environments = response.data.environments;应使用set，addObject或Ember方式。
如果您使用变量environment代替content，也可以在模板中使用它。

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

远程AJAX数据到控制器

2 个答案: