2014-03-30 38 views
1

我确信有一个更简单的方法来完成我目前的任务,但这是我知道如何做到目前为止,因为我刚刚开始使用Ember的唯一途径。灰烬控制器和路线

所以我有一个REST风格的API,它告诉烬者当前登录了哪个用户(仅限他们的名字),以便它可以在页面上显示为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() 
}); 

这并没有为我工作。任何想法我应该做什么/我做错了什么?

UPDATE

一些解决这个更多的阅读之后,现在我有什么,我认为这是我来得到它的权利

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现在对我来说是更好的选择吗?

回答

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> 

完美的作品了。

0

您应该使用您用于其他数据的任何数据适配器。简单的$ .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({}); 

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

+0

好吧,我试了一下,但它在我的页面上呈现为'[object Object]' – pattmorter

+0

[这是Ember.RSVP模拟ajax的一个工作示例](http://emberjs.jsbin.com/zasowuho/1/编辑?HTML,JS,输出)。检查你从'data [0] .name'得到了什么。 – panta82