Ember 控制器和路由

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({});

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