Question

我确信有一种更简单的方法来完成我目前的任务，但这是我知道如何做的唯一方法，因为我刚刚开始使用Ember。

所以我有一个RESTful api告诉ember当前登录的用户（仅限他们的名字），以便它可以在Signed in As {{currentUser}}页面上显示。我能够使其工作的唯一方法是通过扩展应用程序路径：

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    var deferredData = Ember.Deferred.create();          
    var list = [];
    $.getJSON( '/user/profile/', function(data) {
      list.push({
        currentUser: data[0].name
      })
      deferredData.resolve(list);
    });
    return deferredData;
  }
});

然后在我的页面上执行：

<p class="navbar-text navbar-right">
    <p class="navbar-text navbar-right">Signed in as {{#link-to 'account' class="navbar-link" id="current-user"}}{{#each}}{{currentUser}}{{/each}}{{/link-to}}</p>
</p>

它有效，但我觉得这不是完成任务的适当方式。我尝试使用App.ApplicationController以下内容：

App.ApplicationControler = Ember.Controller.extend({
  currentUser: function() {
    $.getJSON( '/user/profile/', function(data) {
      return data[0].name
    });
  }.property()
});

这对我也不起作用。任何想法我应该做什么/我做错了什么？

更新

经过一些更多的阅读，现在我已经拥有了，而且我认为这是我最接近正确的

App.ApplicationController = Ember.Controller.extend({
  currentUser: function() {
    return $.getJSON('/user/profile/').then( function(response) {
      console.log(response[0].name);
      return response[0].name;
    });
  }.property()
});

App.applicationController = App.ApplicationController.create();

此时使用数据存储和RESTadapters对我来说是更好的选择吗？

Answer 1

我解决了我的问题。我试图将响应设置为仅一个值，但这不会起作用，因为该值不会被字符串化。为了解决这个问题，我做了以下几点：

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return $.getJSON('/user/profile/').then( function(data) {
      return { 
        currentUser: data[0] 
      };
    });
  }
});

在我看来，我做了以下事情：

  <script type="text/x-handlebars" data-template-name="navigation">
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        {{#link-to 'index' class="navbar-brand"}}Budgeter{{/link-to}}
        <p class="navbar-text navbar-right">
          Signed in as {{#link-to 'account' class="navbar-link" id="current-user"}}{{currentUser.name}}{{/link-to}}
        </p>
        <ul class="nav navbar-nav">
          <li>{{#link-to 'index'}}<i class="fa fa-home sp-aft"></i>Home{{/link-to}}</li>
          <li>{{#link-to 'account'}}<i class="fa fa-user sp-aft"></i>Account{{/link-to}}</li>
          <li><a href="/logout"><i class="fa fa-sign-out sp-aft"></i>Sign Out</a></li>
        </ul>
      </div>
    </nav>
  </script>

现在完美运作。

Answer 2

您应该使用您用于其他数据的数据适配器。普通的$ .ajax很好，如果这就是你正在使用的。

使用route.model挂钩并将导航栏渲染到application模板的第一次尝试是正确的方法。但是，我不确定为什么在你似乎只需要一个数组的时候创建一个数组。试试这个：

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return $.getJSON('/user/profile/')
            .then(function (data) {
                return {
                    currentUser: data[0].name
                };
            });
    }
});

application.hbs：

<p class="navbar-text navbar-right">
    <p class="navbar-text navbar-right">
        Signed in as {{#link-to 'account' class="navbar-link" id="current-user"}}{{currentUser}}{{/link-to}}
    </p>
</p>

啊，是的。您应该将ApplicationController定义为：

App.ApplicationController = Ember.ObjectController.extend({});

...所以你可以直接访问你的模型对象。

灰烬控制器和路线

2 个答案: